Home > Article > Backend Development > 如何判断 是否显示出 返回顶点图标
如何判断 是否显示出 返回顶点图标
- WBOYOriginal
- 2016-06-13 12:12:38883browse
怎么判断 是否显示出 返回顶点图标
我想在页面中添加一个返回顶点 如果这个页面完全显示出来 就不出现 返回顶点的图标
如果页面可以往下滑动 就显示 返回顶点的图标 这个该怎么判断呢？
谢谢
------解决思路----------------------
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 />
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：#1241 - Operand should contain 一 column(s)Next article：PHP抓取页面上的数组 并循环输出 急