如何設置返回頂部按鈕

返回頂部是網站中很重要的一個功能，它能讓用戶快速回到頁面頂部，提高用戶體驗。本文介紹如何使用HTML5和JavaScript設置一個返回頂部的按鈕。

步驟：

1. 在HTML中添加一個按鈕

<button id="go-top">返回頂部</button>

2. 使用CSS設置按鈕的樣式

#go-top {
position: fixed;
right: 20px;
bottom: 20px;
display: none;
width: 50px;
height: 50px;
background-color: #333;
color: #fff;
border: none;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
}

3. 使用JavaScript為按鈕添加點擊事件，使頁面滾動到頂部

window.onscroll = function() {
if (document.documentElement.scrollTop >100) {
document.querySelector('#go-top').style.display = 'block';
} else {
document.querySelector('#go-top').style.display = 'none';
}
}
document.querySelector('#go-top').onclick = function() {
document.documentElement.scrollTop = 0;
}

通過監聽滾動事件，當頁面滾動超過100像素時，顯示返回頂部的按鈕；點擊按鈕時，跳轉到頁面頂部。