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

WBOY
Lepaskan: 2016-06-13 12:12:38
asal
939 orang telah melayarinya

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan