suchen

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

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

WBOY
WBOYOriginal
2016-06-13 12:12:38936Durchsuche

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

Stellungnahme：
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
Vorheriger Artikel：#1241 - Operand should contain 一 column(s)Nächster Artikel：PHP抓取页面上的数组 并循环输出 急

In Verbindung stehende Artikel

Mehr sehen