第一次知道可以用超鏈接（錨點）實現回到頂部的時候我是很震驚的，想著原來可以這么簡單??！但是作為一個正在學習JS的小白，不能就這么輕易止步，所以查資料自己整了一個JS的回到頂部。
HTML代碼：
<div class="container"> <p>你好哇</p> ... </div> <div id="top">回到頂部</div>
CSS代碼：
.container{
border: 1px solid black;
}
#top{
position: fixed;
padding: 10px;
width: 20px;
border: 1px solid black;
box-shadow: 0 0 2px #333;
right: 20px;
bottom: 20px;
}
#top:hover{
cursor: pointer;
}
JS代碼：
//創建變量
var scroll_Top = document.getElementById('top');
//用最常用的scrollTop屬性實現
var timer = null;
function scrollTop(){
// 取消一個通過調用requestAnimationFrame()方法添加到計劃中的動畫幀請求.
cancelAnimationFrame(timer);
/* requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，
在一次重繪或回流中就完成，并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率
一般來說，這個頻率為每秒60幀。 */
timer = requestAnimationFrame(function sTop(){
var top = document.body.scrollTop || document.documentElement.scrollTop;
if(top > 0){
//使用定時器，將scrollTop的值每次減少20（自行設置），直到減少到0，則滾動完畢
document.body.scrollTop = document.documentElement.scrollTop = top - 20;
timer = requestAnimationFrame(sTop);
}else{
cancelAnimationFrame(timer);
}
});
}
scroll_Top.addEventListener('click', scrollTop, false);
效果手動截圖：
以上所述是小編給大家介紹的JS回到頂部詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
