apexに戻るアイコンが表示されるかどうかを確認する方法-PHPチュートリアル-php.cn

apexに戻るアイコンが表示されるかどうかを確認する方法

WBOY

リリース： 2016-06-13 12:12:38

オリジナル

940 人が閲覧しました

頂点へ戻るアイコンが表示されるかどうかの判断方法
ページ内に頂点へ戻るアイコンを追加したいのですが、ページが完全に表示されている場合、頂点へ戻るアイコンは表示されません。下にスライドすると頂点に戻るアイコンが表示されます。
ありがとうございます

-----解決策のアイデア----------------------js 判定スクロールBar 表示するかどうか、または画面の位置を決定し、この 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 />

ログイン後にコピー