隨著互聯網的發展，Web頁面越來越復雜，導航欄、商品展示、信息填表等等元素不斷增加，當頁面長度超過一屏幕時，用戶就要不停地往下滾動。為了方便用戶回到頁面頂部，許多網站使用回到頂部的功能。在 JavaScript 中，實現回到頁面頂部的功能非常簡單，下面我們就來一起看一下。

首先，我們要在頁面中添加一個用于回到頂部的按鈕，可以用按鈕、圖片、文字等等作為元素。

<button onclick="topFunction()" id="myBtn" title="回到頂部">回到頂部</button>

接下來，我們需要實現一個 JavaScript 函數，當點擊回到頂部的按鈕時，它可以跳轉到文檔的頂部。

function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}

上述代碼中，我們直接將頁面滾動條的位置設置為 0，即文檔頂部。

除了通過按鈕來觸發 JavaScript 函數實現回到頂部的功能，我們還可以通過其他方式觸發該函數。例如，當用戶滾動文檔時，可以將一個返回頂部的箭頭顯示出來，這樣用戶就可以通過點擊箭頭回到頁面頂部了。

window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}

上述代碼中，我們使用 onscroll 事件實現了滾動時調用 JavaScript 函數的效果。在 scrollFunction 函數中，我們通過判斷頁面滾動條位置是否超過 20 來顯示或隱藏返回頂部的按鈕。

除了返回頂部的按鈕，我們還可以實現更加炫酷的動畫效果。例如，當用戶點擊返回頂部的按鈕時，頁面會平滑地滾動到頁面頂部。

function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
function smoothScroll() {
var currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
if (currentPosition >0) {
window.requestAnimationFrame(smoothScroll);
window.scrollTo(0, currentPosition - currentPosition / 8);
}
}

上述代碼中，我們使用了 requestAnimationFrame 函數實現了滾動的平滑效果。通過不斷地調用自身函數，在每個循環中通過 scrollTo 函數實現平滑滾動。

總的來說，在 JavaScript 中實現返回頂部的功能非常簡單，我們只需要依次實現添加回到頂部的按鈕、定義回到頂部的函數、增加滾動事件的效果和實現更加炫酷的動畫效果即可。這也是現今許多網站都使用該功能的原因之一。