隨著互聯網的不斷發展，越來越多的人開始關注頁面的用戶體驗。其中一個重要的方面就是頁面的滾動效果。在瀏覽網頁的過程中，如果用戶需要不斷地向下滾動頁面，就會感到疲憊和不耐煩。因此，添加一個返回頂部的按鈕，可以方便用戶快速回到頁面的頂部，提高用戶的體驗。

那么，如何在HTML頁面中添加返回頂部的代碼呢？下面我們來介紹一下。

步驟一：在HTML文件中添加返回頂部的按鈕

在HTML文件中添加一個按鈕，用于返回頁面的頂部。代碼如下：

這里的id為“back-to-top”，可以根據自己的需要進行修改。

步驟二：在CSS文件中添加返回頂部按鈕的樣式

在CSS文件中添加返回頂部按鈕的樣式，包括按鈕的位置、大小、顏色等。代碼如下：

#back-to-top {: fixed;: 20px;

right: 20px;

width: 50px;

height: 50px;d-color: #ccc;

color: #fff;

border-radius: 50%;ter;t-size: 18px;e-height: 50px;ter;

這里設置了按鈕的位置為瀏覽器窗口的右下角，大小為50px，顏色為灰色，字體顏色為白色，樣式可以根據自己的需要進行修改。

步驟三：在JavaScript文件中添加返回頂部的代碼

在JavaScript文件中添加返回頂部的代碼，通過點擊按鈕實現頁面的滾動效果。代碼如下：

ententById("back-to-top");clickction() {tScrollententElementent.body.scrollTop;tScroll >0) {dowimationFrame(backToTop);dowtScrolltScroll / 5));

}

imationFrame方法，實現了平滑滾動的效果。可以根據自己的需要進行修改。

到此，我們就完成了在HTML頁面中添加返回頂部的代碼。通過這個小小的功能，可以提升用戶的體驗，讓用戶更加愉悅地瀏覽網頁。