js回到頂部動畫效果實現方法

達到回到頂部效果主要原理就是修改滾動條距離頂部的位置為零，滾動條距離頂部的位置介紹：

　　獲取當前頁面滾動條縱坐標的位置：document.body.scrollTop與document.documentElement.scrollTop

並且，document.body.scrollTop與document.documentElement.scrollTop兩者有個特點，就是同時只會有一個值生效。比如document.body.scrollTop能取到值的時候，document.documentElement.scrollTop就會始終為0；反之亦然。

接下來介紹三種回到頂部的實現：

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;

來源：

1.document.body.scrollTop與document.documentElement.scrollTop相關：點我跳轉；

2.animate資料：點我跳轉；

3.第三種動畫效果的出處：點我跳轉。