js隱藏與顯示回到頂部按鈕及window.onscroll事件應用_javascript技巧

現在大多數網站都會添加此功能：當滾動條滾動到頁面的下方時，頁面的右下角會顯示出來一個「回到頂部」的按鈕或連接，點擊該按鈕後頁面會跳到頂部，或某一個適合查看內容的位置。

那麼，如何控制「回到頂部」按鈕的顯示或隱藏呢？其實我們只需要實現window.onscroll 事件即可，代碼如下：

複製代碼 代碼如下:

window.onscroll = function () {
if (document.documentElement.scrollTop document.body.scrollTop > 100) {
document.getElementById("scrollto").style.display = "block";
}
else {
document.getElementById("scrollto").style.display = "none";
}
}

scrollto 為頁面上「回到頂部」的容器（div標籤）