最近做的都是前端的項目，很多項目都有回到頂部的需求，下面把我寫js代碼做個筆錄，方便以後查找。
發現還可以添加從快到慢的動畫效果和隨時下拉滾動條停止滾動的功能， 參考了imooc上相關課程，最終實現JS代碼如下：
//頁面加載後觸發
window.onload = function(){
var btn = document.getElementById('btn');
var timer = null;
var isTop = true;
//獲取頁面可視區高度
var clientHeight = document.documentElement.clientHeight;
//滾動條滾動時觸發
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() {
//設置定時器
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);
};
};
以上內容是小編給大家介紹的基於JavaScript實現回到頁面頂部動畫代碼，代碼簡單易懂，所有沒給大家附太多的注釋，如果大家在參考過程中發現有任何疑問歡迎給我留言，小編會及時回復大家的！