這篇文章主要介紹了基于JavaScript實現(xiàn)回到頁面頂部動畫代碼的相關(guān)資料,代碼簡單易用，非常實用，需要的朋友可以參考下

最近做的都是前端的項目，很多項目都有回到頂部的需求，下面把我寫js代碼做個筆錄，方便以后查找。

發(fā)現(xiàn)還可以添加從快到慢的動畫效果和隨時下拉滾動條停止?jié)L動的功能， 參考了imooc上相關(guān)課程，最終實現(xiàn)JS代碼如下：

//頁面加載后觸發(fā)

window.onload = function(){

var btn = document.getElementById('btn');

var timer = null;

var isTop = true;

//獲取頁面可視區(qū)高度

var clientHeight = document.documentElement.clientHeight;

//滾動條滾動時觸發(fā)

window.onscroll = function() {

//顯示回到頂部按鈕

var osTop = document.documentElement.scrollTop || document.body.scrollTop;

if (osTop >= clientHeight) {

btn.style.display = "block";

} else {

btn.style.display = "none";

};

//回到頂部過程中用戶滾動滾動條，停止定時器

if (!isTop) {

clearInterval(timer);

};

isTop = false;

};

btn.onclick = function() {

//設(shè)置定時器

timer = setInterval(function(){

//獲取滾動條距離頂部高度

var osTop = document.documentElement.scrollTop || document.body.scrollTop;

var ispeed = Math.floor(-osTop / 7);

document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;

//到達頂部，清除定時器

if (osTop == 0) {

clearInterval(timer);

};

isTop = true;

},30);

};

};

以上內(nèi)容是小編給大家介紹的基于JavaScript實現(xiàn)回到頁面頂部動畫代碼，代碼簡單易懂，所有沒給大家附太多的注釋