如何 - 建立滾動到頂部按鈕
學習如何使用 CSS 建立一個“滾動到頂部”的按鈕。
如何建立滾動到頂部按鈕
步驟 1) 新增 HTML
建立一個按鈕，點選後將使用者帶到頁面頂部
示例
<button onclick="topFunction()" id="myBtn" title="滾動到頂部">頂部</button>
步驟 2) 新增 CSS
樣式化按鈕
示例
#myBtn {
display: none; /* 預設隱藏 */
position: fixed; /* 固定/粘性定位 */
bottom: 20px; /* 將按鈕放在頁面底部 */
right: 30px; /* 按鈕距離右側 30px */
z-index: 99; /* 確保不重疊 */
border: none; /* 移除邊框 */
outline: none; /* 移除輪廓 */
background-color: red; /* 設定背景顏色 */
color: white; /* 文字顏色 */
cursor: pointer; /* 懸停時新增滑鼠指標 */
padding: 15px; /* 一些內邊距 */
border-radius: 10px; /* 圓角 */
font-size: 18px; /* 增加字號 */
}
#myBtn:hover {
background-color: #555; /* 懸停時新增深灰色背景 */
}
步驟 3) 新增 JavaScript
示例
// 獲取按鈕
let mybutton = document.getElementById("myBtn");
// 當用戶從文件頂部向下滾動 20px 時，顯示按鈕
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// 當用戶點選按鈕時，滾動到文件頂部
function topFunction() {
document.body.scrollTop = 0; // Safari
document.documentElement.scrollTop = 0; // Chrome, Firefox, IE and Opera
}
自己動手試一試 »
