如何 - 创建滚动到顶部按钮
学习如何使用 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
}
自己动手试一试 »
