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

標籤：scrolltop   www   滾動   img   html   jquery   scroll   實現   nim   

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

　　擷取當前頁面捲軸縱座標的位置：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.第三種動畫效果的出處：點我跳轉。

 

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