怎么判断 是否显示出 返回顶点图标

js 判断滚动条是否出现 或者判断屏幕的位置 然后控制这个DIV 是否显示 隐藏.

解决方案 »

  1.   

    http://www.cnblogs.com/jingangel/archive/2012/03/08/2385939.html
      

  2.   


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>test</title>
    <style>
    body{margin:0; padding:0}
    #to_top{width:30px; height:40px; padding:20px; font:14px/20px arial; text-align:center;  background:#06c; position:absolute; cursor:pointer; color:#fff}
    </style>
    <script>
    window.onload = function(){
      var oTop = document.getElementById("to_top");
      var screenw = document.documentElement.clientWidth || document.body.clientWidth;
      var screenh = document.documentElement.clientHeight || document.body.clientHeight;
      oTop.style.left = screenw - oTop.offsetWidth +"px";
      oTop.style.top = screenh - oTop.offsetHeight + "px";
      oTop.onclick = function(){
        document.documentElement.scrollTop = document.body.scrollTop =0;
      }
    } window.onscroll = function(){
      var oTop = document.getElementById("to_top");
      var screenw = document.documentElement.clientWidth || document.body.clientWidth;
      var screenh = document.documentElement.clientHeight || document.body.clientHeight;
      var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
      oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px";
      if(scrolltop>300){ // 滚动条超过某位置才显示返回顶部按钮
    oTop.style.visibility = 'visible';
      }else{
    oTop.style.visibility = 'hidden';
      }
    }window.onresize = function(){
      var oTop = document.getElementById("to_top");
      var screenw = document.documentElement.clientWidth || document.body.clientWidth;
      var screenh = document.documentElement.clientHeight || document.body.clientHeight;
      oTop.style.left = screenw - oTop.offsetWidth +"px";
      oTop.style.top = screenh - oTop.offsetHeight + "px";
    }</script>
    </head><body style="height:2000px;"><h1>返回顶部</h1>
    <div id="to_top" style="visibility:hidden">返回顶部</div>
    </body>
    </html>