在現代網站中，常常需要一種方便快捷的方式使得用戶能夠快速地回到網頁的頂部，而置頂按鈕便成為了這樣一種流行的功能實現方式。當用戶在網頁中向下滾動一定程度后，置頂按鈕會自動出現在屏幕右下角，方便用戶快速地回到網頁頂部。在 HTML 和 JavaScript 技術的支持下，實現置頂按鈕并不困難，下面我們來看看具體實現代碼。

<button onclick="toTop()" id="toTopBtn">回到頂部</button>
<script>          
function toTop() {             
let currentY = document.documentElement.scrollTop || document.body.scrollTop;    
if (currentY > 0) {    
window.requestAnimationFrame(toTop);    
window.scrollTo(0, currentY - currentY / 10);    
}    
}          
window.onscroll = function () {         
let btn = document.getElementById("toTopBtn");    
document.documentElement.scrollTop || document.body.scrollTop > 500    
? (btn.style.display = "block")    
: (btn.style.display = "none");    
}          
</script>

代碼解釋：

上面的代碼主要有兩部分。第一部分 HTML 代碼生成了一個按鈕，設置了一個 ID 叫 toTopBtn，可以通過這個 ID 得到這個按鈕并為它設置一些屬性。第二部分 JavaScript 代碼則包含了兩個函數：toTop() 和 window.onscroll。

toTop() 函數的功能是將當前頁面的滾動條不斷向上移動，最終返回到頁面頂部。由于頁面滾動時不是瞬間完成的，而是在一定的時間內完成的，所以使用了 requestAnimationFrame()（這是一個 Web 標準 API，用來在每一幀之前運行一些 JavaScript 代碼以避免在頁面滾動過程中出現“卡頓”現象）。

window.onscroll 函數則實現了當頁面滾動大于 500 像素時，顯示置頂按鈕，反之隱藏按鈕。通過設置按鈕的 style.display 屬性即可實現按鈕的顯示與隱藏。因此，通過這兩部分代碼的協作，便實現了置頂按鈕的實現。