使用JavaScript实现回到顶部效果

锚链接
使用锚链接方式实现回到顶部效果,是最简便的一种方式,即将标签a中的href属性值设置为#即可:<a href="#" ></a>,便可实现一键回到顶部效果.为了提供较好的用户体验,这里使用js实现这个功能.

功能点
1. 返回顶部的过程是一个由快到慢的滚动过程;
2. 在返回顶部的滚动过程中，如果滚动鼠标滚轮，可暂停在当前位置。
3. 滚动条距离顶部较远时,显示返回顶部按钮,较近时不显示;

主要知识点
1. DOM操作

• document.getElementById
  -根据ID获取标签元素var obtn=document.getElementById('btn');
• 获取浏览器距离顶部的高度，注意在chrom和IE等浏览器的兼容性
  -document.documentElement.scrollTop 滚动条到顶端的距离，可以读写（适用 IE 类浏览器）
  -document.body.scrollTop 滚动条到顶端的距离，可以读写（适用 chrome 类浏览器）
  
  1. 事件运用
• window.onload 页面加载完毕后触发
• onclick 点击后触发
• window.onscroll 滚动条滚动时触发
  
  1. 定时器
• setInterval() 设置定时器，需传入两个参数：第一个是重复执行的函数，第二个是函数重复执行的时间间隔
• clearInterval() 关闭定时器，需传入一个参数：定时器对象

代码
首先获取元素标签，并对其绑定点击事件：获取滚动条距离顶部的高度并进行赋值操作。这样可实现每点击一次滚动条向上滚动200的距离，需要不断触发点击事件直到滚动条回到顶部为止。

var osTop=document.documentElement.scrollTop|| document.body.scrollTop;
//osTop=200;
document.documentElement.scrollTop=document.body.scrollTop-=200;

使用setInterval()函数，每隔一段时间执行一次赋值操作。并当滚动条距离顶部的高度值osTop为0时，清除定时器。

为了实现滚动条向上滚动的过程是一个由快到慢的过程，执行下面的运算。ispeed的绝对值越大、滚动条距离顶部的高度值就越小，即回到顶部的速度就越快；ispeed的绝对值越小，返回顶部的速度就相对较小。
在这里使用Math.floor()向下取整，当osTop / 5介于0~1之间时，ispeed的值舍为0。这样的话chrome浏览器中滚动条距离顶部的高度值 document.body.scrollTop= osTop-0，这样滚动条的距离顶部的高度会一直为某个数字。导致滚动条到顶部的距离永远不会为0，这样滚动条看似在顶部位置停止，实际上鼠标下拉滚动条时发现滚动条依然会向上滚动，说明定时器一直在执行。

var ispeed=Math.floor(osTop / 5);
document.documentElement.scrollTop=document.body.scrollTop = osTop-ispeed;
// console.log(osTop-ispeed);

然鹅，用Math.ceil()向上取整，可保证ispeed的值不会为0；或者依然使用Math.floor()将值改为负值Math.floor(-osTop / 5)是一样的道理。代码如下：

var timer = null;
obtn.onclick=function(){
        //设置定时器

        timer=setInterval(function(){
            //获取滚动条距离顶部的高度
            var osTop=document.documentElement.scrollTop|| document.body.scrollTop;
            var ispeed=Math.floor(-osTop / 5);
            isTop = true;
            document.documentElement.scrollTop=document.body.scrollTop = osTop+ispeed;

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

    }

这样就实现了点击返回顶部按钮，页面返回顶部的速度随着滚动条到顶部距离的减小而变慢，即实现了一个速度由快到慢的过程。

---

window是一个窗口类，onscroll是窗口类window的对象,滚动滚动条时触发。
这里window.onscroll事件的目的，就是在使用鼠标的滚动按钮滚动页面时停止setInterval.用的方法是添加一个isTop.由于页面是一点一点滚动的，函数会被执行多次。鼠标滚动，触发window.onscroll,执行完里面的函数后才执行setInterval，但是在执行window.onscroll事件第二次的时候!isTop=true,清楚定时器，这个时候就不再往上滚动了。

    var isTop = true;
    var clientHeight = document.documentElement.clientHeight;//获取页面可视区高度

    window.onscroll=function(){
        //alert(clientHeight);
        //滚动条滚动触发
        if(!isTop)//条件为真时执行清除定时器操作
            clearInterval(timer);
        isTop = false;
    }

实现了滚动暂停，另外再在window.onscroll事件中使用脚本控制“回到顶部”按钮的显示与隐藏

    var osTop=document.documentElement.scrollTop|| document.body.scrollTop;
    if(osTop >= clientHeight){
            obtn.style.display = 'block';
        }else{
            obtn.style.display = 'none';
        }

问题:

var osTop = document.documentElement.scrollTop为什么不能做全局变量
1、尽量不要使用全局变量。每声明一个全局变量会占用一点内存，另外会造成变量名污染；
2、var osTop = document.documentElement.scrollTop。如果写在外面，osTop只是在JS文件载入时获取滚动条距离顶部的高度，但有的时候，如页面在滚动的时候osTop的值是在不断变化的，所以我们要在绑定scroll事件中不断的去获取osTop的值.