如何判断 是否显示出 返回顶点图标
- WBOY原創
- 2016-06-13 12:12:38937瀏覽
怎么判断 是否显示出 返回顶点图标
我想在页面中添加一个返回顶点 如果这个页面完全显示出来 就不出现 返回顶点的图标
如果页面可以往下滑动 就显示 返回顶点的图标 这个该怎么判断呢？
谢谢
------解决思路----------------------
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 />
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn