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

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

　　獲取當前頁面滾動條縱座標的位置：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 = 0;

很簡單，直接改變滾動條頂部距離爲0達到目的。

二、有簡單的動畫效果：

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

在一段時間以內改變頂部的距離，也能夠支持一些簡單的動畫效果（速度函數）

三、由快到慢動畫效果，體驗較好：

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.第三種動畫效果的出處：點我跳轉。