回到顶部

2017-02-07 本文已影响0人努力是为了选择

首先来下简易的css和html布局

<style>
  *{
    margin: 0px;
    padding: 0px;
  }
  .box{
    width: 1190px;
    height: 2000px;
    background-color: #ccc;
    margin: 0 auto;
  }
  #btn{
    width: 40px;
    height: 40px;
    position: fixed;
    left: 50%;
    bottom: 30px;
    margin-left: 610px;
    display: none;
    background: url(images/top_bg.png) no-repeat left top;
  }
  #btn:hover{
     background: url(images/top_bg.png) no-repeat left -40px;
  }
  </style>
<body>
  <div class="box">
  </div>
  <a href="javascript:;" id="btn" title="回到顶部"> </a>
</body>

其中图片：

top_bg.png

接下来js

window.onload=function(){
    var obtn=document.getElementById('btn');
    var timer=null;
    obtn.onclick=function(){
        timer=setInterval(function(){
        var osTop=document.documentElement.scrollTop||document.body.scrollTop; //注意document.documentElement.scrollTop谷歌下打开是0,因为兼容问题，IE下不是
        var ispeed= osTop/3;                  
        document.documentElement.scrollTop=document.body.scrollTop=osTop-=ispeed;  //滚动条上升的速度越来越慢 ，ispeed越来越小应为osTop越来越小
        if(osTop==0){
          clearInterval(timer)
        }
        },30)
      }
}

这个时候我们console.log(ispeed),发现ispeed并不一定是会整除的。

QQ截图20170207211909.png

很明显小数的性能是不太好的而且会出现各种bug，这里我们Math.floor();
进行向下取整。
之后
再console.log(osTop)

QQ截图20170207212314.png

发现一直在距离上面2的地方无限循环
2/3向下取整后就是0；所以一直减0进入了无线循环
这样导致osTop不为0清不了定时器
解决的办法就是

//在osTop前添加符号，应为-2/3再Math.floor()是-1所以会一直减小到0
var ispeed=Math.floor(-osTop/3);
document.documentElement.scrollTop=document.body.scrollTop=osTop+=ispeed;   //－改为+；结果不变

这样这个问题也就解决了。

但是问题还有：

1.发现在滚动到半路的时候手动拉动滚动条还是会往上应为这时候定时器还没有被清除，毕竟清除的条件是到达顶部为0

2.总不能让回到顶部的图片一直显示把(可以让滚动一个可视区高度的时候在出现图片当然一开始display:none)

怎么做呢

var clientHeight=document.documentElement.clientHeight;//可视区高度
var isTop=true; //先声明
window.onscroll=function(){        
    var osTop=document.documentElement.scrollTop||document.body.scrollTop;
     if(osTop>=clientHeight){
        obtn.style.display='block';
      }
      else{
        obtn.style.display='none';
      }
//回到顶部图片的显示与隐藏
      if(!isTop){
        clearInterval(timer);
      }
      isTop=false;                                          
    }

这时候发现还不行为什么呢，应为一开始为true.滚动了.将true变成了false，一取反，变清了定时器那可不得了这样要点一下上升一下。能做的就是在点击里面更新

isTop=true;     //进行更新

这样点击后变成true变不会清理定时器。*这里的重点是让程序如何知道是是否是我们手动使得scrollTop变化。（用定时器回到顶部是不会在中途清理定时器的（一直在更新成true），而当我们手动拉动滚动条的时候并不会变成true,会变成false而清理定时器）

下面是完整js代码

    window.onload=function(){
      var obtn=document.getElementById('btn');
      var clientHeight=document.documentElement.clientHeight;
      var timer=null;
      var isTop=true;
      window.onscroll=function(){
        var osTop=document.documentElement.scrollTop||document.body.scrollTop;
        if(osTop>=clientHeight){
          obtn.style.display='block';
        }
        else{
          obtn.style.display='none';
        }
        if(!isTop){
          clearInterval(timer);
        }
        isTop=false;
      }
      obtn.onclick=function(){
        timer=setInterval(function(){
        var osTop=document.documentElement.scrollTop||document.body.scrollTop; //document.documentElement.scrollTop谷歌下打开是0,因为兼容问题，IE下不是
        var ispeed=Math.floor(-osTop/12);
        document.documentElement.scrollTop=document.body.scrollTop=osTop+=ispeed;
        isTop=true;
        if(osTop==0){
          clearInterval(timer)
        }
        },30)
      }
    }