网页中"返回顶部"的实现
2019-02-13 本文已影响0人
Toplhyi
定义返回顶部按钮的css样式如下(可以根据需要自己调整):
#myBtn {
display: none; /* 默认隐藏 */
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: red; /* 设置背景颜色,你可以设置自己想要的颜色或图片 */
color: white; /* 文本颜色 */
cursor: pointer;
padding: 15px;
border-radius: 10px; /* 圆角 */
}
#myBtn:hover {
background-color: #555;
}
添加js代码:
// 当网页向下滑动 20px 出现"返回顶部" 按钮
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// 点击按钮,返回顶部
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}