基於JavaScript實現回到頁面頂部動畫代碼

最近做的都是前端的項目，很多項目都有回到頂部的需求，下面把我寫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實現回到頁面頂部動畫代碼，代碼簡單易懂，所有沒給大家附太多的註釋，如果大家在參考過程中發現有任何疑問歡迎給我留言，小編會及時回復大家的！