如何判断是否显示出返回顶点图标-PHP Tutorial-php.cn

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

WBOY

Release： 2016-06-13 12:12:38

Original

954 people have browsed it

怎么判断是否显示出返回顶点图标
我想在页面中添加一个返回顶点如果这个页面完全显示出来就不出现返回顶点的图标
如果页面可以往下滑动就显示返回顶点的图标这个该怎么判断呢？
谢谢
------解决思路----------------------
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 />

Copy after login

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

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