回到顶部按钮对于大部分网站来说都是不可缺少的一部分，网上实现功能的代码有很多，阿萌介绍一种利用原生JavaScript实现的带减速效果的回到顶部。

首先确定我们的需求：
1、点击链接页面自动滑动到顶部。
2、在滑动到顶部的过程中，为了更贴合物理效果，越接近顶部滑动速度越慢。

下面说明一下原理

第一需求：获取当前页面滚轮高度，减去固定像素的高度，利用window.scrollTo(x,y)函数改变滚轮高度，然后利用setTimeout迭代调用本身函数，以达到不间断滑动的效果。

第二需求：设定一个加速度变量，修改window.scrollTo(x,y)中的X,Y值，使之每次都除以加速度变量，使之按照一定量改变移动像素，以达到减速滑动的效果。

可能我写的不是太清晰，下面还是看代码吧：

<script type="text/javascript">
function goTop(aspeed, time) {
    aspeed = aspeed || 0.03;
    time = time || 12;
    var x1,y1,x2,y2,x3,y3;
    if (document.documentElement) {
        x1 = document.documentElement.scrollLeft || 0;
        y1 = document.documentElement.scrollTop || 0;
    }
    if (document.body) {
        x2 = document.body.scrollLeft || 0;
        y2 = document.body.scrollTop || 0;
    }
    var x3 = window.scrollX || 0;
    var y3 = window.scrollY || 0;
    var x = Math.max(x1, Math.max(x2, x3));
    var y = Math.max(y1, Math.max(y2, y3));
    var speed = 1 + aspeed;
    window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
 
    if(x > 0 || y > 0) {
        var turnFun = "goTop(" + aspeed + ", " + time + ")";
        window.setTimeout(turnFun, time);
    }
} 
</script>
<a onclick="goTop();return false;" style="cursor:pointer;">TOP</a>

有人也许会觉得长，其实长的原因是调用了三种不同高度值，分别是“document.documentElement.scrollLeft”，“document.body.scrollLeft”，“window.scrollX”，这三种其实作用都是一样的，只是在某些浏览器中会有不同的结果，所以特此大费周章谢了好几段，以保证兼容性和准确性。

如果对此实现方式有问题要问的话，或者感觉代码哪块不合理的地方，希望能留言、邮箱或QQ联系我，谢谢。