如何 - 滚动回顶部按钮
学习如何使用 CSS 创建“滚动回顶部”按钮。
如何创建滚动到顶部按钮
步骤 1) 添加 HTML
创建一个按钮，当点击该按钮时，它会将用户带到页面的顶部。
示例
<button onclick="topFunction()" id="myBtn" title="返回顶部">顶部</button>
步骤 2) 添加 CSS
为按钮设置样式
示例
#myBtn {
display: none; /* 默认隐藏 */
position: fixed; /* 固定定位 */
bottom: 20px; /* 将按钮放置在页面底部 */
right: 30px; /* 将按钮放置在距离右侧 30 像素的位置 */
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");
// 当用户从文档顶部向下滚动 20 像素时，显示按钮
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 和 Opera
}
尝试一下 »
