JavaScript回到顶部动画效果实现方法

一、实现原理

达到回到顶部效果主要原理就是修改滚动条距离顶部的位置为零，滚动条距离顶部的位置介绍：

获取当前页面滚动条纵坐标的位置：document.body.scrollTop与document.documentElement.scrollTop

并且，document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候，document.documentElement.scrollTop就会始终为0；反之亦然。

• 获取当前页面滚动条纵坐标的位置：document.body.scrollTop与document.documentElement.scrollTop
• 获取当前页面滚动条横坐标的位置：document.body.scrollLeft与document.documentElement.scrollLeft

二、三种回到顶部的实现

1、无动画效果

document.body.scrollTop = document.documentElement.scrollTop = 0;

很简单，直接改变滚动条顶部距离为0达到目的。

2、有简单的动画效果

$("html,body").animate({scrollTop:0},500);

在一段时间之内改变顶部的距离，也可以支持一些简单的动画效果（速度函数）

3、由快到慢动画效果，体验较好

scrollToptimer = setInterval(function () {
    console.log("定时循环回到顶部")
    var top = document.body.scrollTop || document.documentElement.scrollTop;
    var speed = top / 4;
    if (document.body.scrollTop!=0) {
        document.body.scrollTop -= speed;
    }else {
        document.documentElement.scrollTop -= speed;
    }
    if (top == 0) {
        clearInterval(scrollToptimer);
    }
}, 30); 

大致原理：

因为减过之后的scrollTop越来越少，减的值越来越少，给人一种由快到慢的感觉。因为document.body.scrollTop与document.documentElement.scrollTop只会有一个有值，所以需要判断一下，最后回到顶部后，清除掉定时器。speed可以设置大小，除数越大speed值越小，动画效果越慢。

其中top的值也可以这么取：

var top=document.body.scrollTop + document.documentElement.scrollTop;

三、各浏览器下scrollTop的差异

• IE6/7/8：可以使用 document.documentElement.scrollTop；
• IE9及以上：可以使用window.pageYOffset或者document.documentElement.scrollTop
• Safari:safari： window.pageYOffset 与document.body.scrollTop都可以；
• Firefox:火狐等等相对标准些的浏览器就省心多了，直接用window.pageYOffset 或者 document.documentElement.scrollTop ；
• Chrome：谷歌浏览器只认识document.body.scrollTop;

注：标准浏览器是只认识documentElement.scrollTop的，但chrome虽然我感觉比firefox还标准，但却不认识这个，在有文档声明时，chrome也只认识document.body.scrollTop.
由于在不同情况下，document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值，那到底网页的scrollTop值怎么得到呢？难道又要用JavaScript进行判断？

其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候，document.documentElement.scrollTop就会始终为0；反之亦然。所以，如果要得到网页的真正的scrollTop值，如果不考虑safari，可以这样：

var sTop=document.body.scrollTop+document.documentElement.scrollTop;

这两个值总会有一个恒为0，所以不用担心会对真正的scrollTop造成影响。一点小技巧，但很实用。

四、获取scrollTop的值

可以使用window.pageYoffset

Window pageXOffset 和 pageYOffset 属性。其定义：pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。
注意： IE 8 及 更早 IE 版本不支持该属性,但可以使用 "document.documentElement.scrollLeft" 和 "document.documentElement.scrollTop" 属性 。
由于谷歌兼容问题，可以使用document.body.scrollLeft和document.body.scrollTop 或者window.pageXoffset与window.pageYoffset。

var heightTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(heightTop);