JS回到顶部效果设计总结

回到顶部效果的基本思路：

1. 创建一个a标签，display设置为none

2. 在JS文件中注册click事件，利用回调函数setInterval()不断减少document.body.scrollTop的数值直到为0，并检查是否为0，如果是则调用clearInterval()

3. 为了显示返回顶部时的缓冲效果，设置一个速度speed，是top的五分之一，每次document.body.scrollTop减少的数值则为speed

4. 为了达到第二屏才显示返回顶部按键的效果，在window.onscroll的事件上注册判断函数：当document.body.scrollTop（滚动条离整个网页页面顶端的距离）大于或等于document.documentElement.clientHeight（网页页面实际可视距离）时，才将a标签的display设置为block

具体代码：

window.onload = function () {
    var timer = null;
    var backTop = document.getElementById('backTop');
    var height = document.documentElement.clientHeight;

    window.onscroll = function(){
      if(document.body.scrollTop >= height)
      {
          backTop.style.display = "block";
      }
        else{
          backTop.style.display = "none";
      }
    };

    backTop.addEventListener('click', function(){
       timer = setInterval(function(){
           var top = document.body.scrollTop;
           var speed = top / 5;
           document.body.scrollTop = top - speed;

           if(top == 0)
           {
               clearInterval(timer);
           }
       },30);
    });
};

//代码来自极客学院教程http://www.jikexueyuan.com/course/342_2.html?ss=1

其中，document.body指的是整个文档中的body标签，当文档在浏览器中被渲染成页面时是整个页面的长度；而document.documentElement指的是当前页面的可视区域。