最近做的都是前端的項目,很多項目都有回到頂部的需求,下面把我寫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;//到達(dá)頂部,清除定時器if (osTop == 0) {clearInterval(timer);};isTop = true;},30);};};
以上內(nèi)容是小編給大家介紹的基于JavaScript實現(xiàn)回到頁面頂部動畫代碼,代碼簡單易懂,所有沒給大家附太多的注釋,如果大家在參考過程中發(fā)現(xiàn)有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
新聞熱點
疑難解答