Heim > Backend-Entwicklung > PHP-Tutorial > 如何判断 是否显示出 返回顶点图标

如何判断 是否显示出 返回顶点图标

WBOY
Freigeben: 2016-06-13 12:12:38
Original
954 Leute haben es durchsucht

怎么判断 是否显示出 返回顶点图标
我想在页面中添加一个返回顶点  如果这个页面完全显示出来 就不出现 返回顶点的图标  
如果页面可以往下滑动  就显示 返回顶点的图标   这个该怎么判断呢?
谢谢
------解决思路----------------------
js 判断滚动条是否出现 或者判断屏幕的位置 然后控制这个DIV 是否显示 隐藏.
------解决思路----------------------
http://www.cnblogs.com/jingangel/archive/2012/03/08/2385939.html
------解决思路----------------------

<br /><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8" /><br /><title>test</title><br /><style><br />body{margin:0; padding:0}<br />#to_top{width:30px; height:40px; padding:20px; font:14px/20px arial; text-align:center;  background:#06c; position:absolute; cursor:pointer; color:#fff}<br /></style><br /><script><br />window.onload = function(){<br />  var oTop = document.getElementById("to_top");<br />  var screenw = document.documentElement.clientWidth <br><font color='#FF8000'>------解决思路----------------------</font><br> document.body.clientWidth;<br />  var screenh = document.documentElement.clientHeight <br><font color='#FF8000'>------解决思路----------------------</font><br> document.body.clientHeight;<br />  oTop.style.left = screenw - oTop.offsetWidth +"px";<br />  oTop.style.top = screenh - oTop.offsetHeight + "px";<br />  oTop.onclick = function(){<br />    document.documentElement.scrollTop = document.body.scrollTop =0;<br />  }<br />} <br /><br />window.onscroll = function(){<br />  var oTop = document.getElementById("to_top");<br />  var screenw = document.documentElement.clientWidth <br><font color='#FF8000'>------解决思路----------------------</font><br> document.body.clientWidth;<br />  var screenh = document.documentElement.clientHeight <br><font color='#FF8000'>------解决思路----------------------</font><br> document.body.clientHeight;<br />  var scrolltop = document.documentElement.scrollTop <br><font color='#FF8000'>------解决思路----------------------</font><br> document.body.scrollTop;<br />  oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px";<br />  if(scrolltop>300){ // 滚动条超过某位置才显示返回顶部按钮<br />	oTop.style.visibility = 'visible';<br />  }else{<br />	oTop.style.visibility = 'hidden';<br />  }<br />}<br /><br />window.onresize = function(){<br />  var oTop = document.getElementById("to_top");<br />  var screenw = document.documentElement.clientWidth <br><font color='#FF8000'>------解决思路----------------------</font><br> document.body.clientWidth;<br />  var screenh = document.documentElement.clientHeight <br><font color='#FF8000'>------解决思路----------------------</font><br> document.body.clientHeight;<br />  oTop.style.left = screenw - oTop.offsetWidth +"px";<br />  oTop.style.top = screenh - oTop.offsetHeight + "px";<br />}<br /><br /></script><br /></head><br /><br /><body style="height:2000px;"><br /><br /><h1>返回顶部</h1><br /><br /><br /><div id="to_top" style="visibility:hidden">返回顶部</div><br /></body><br /></html><br />
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage