<button onclick="topFunction()" id="to_top"></button>
#to_top {
background-image: url(../img/Top.png);
width: 50px;
height: 50px;
background-color: gainsboro;
position: fixed;
margin-left: 1450px;
bottom: 50px;
color: white;
z-index: 10;
display: none;
border: none;
outline:none;
cursor: pointer;
}
//当页面向下滑动出现“Top”按钮
window.onscroll = function () { scrollFunction() }
function scrollFunction() {
if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 780) {
document.getElementById("to_top").style.display = "block";
} else {
document.getElementById("to_top").style.display = "none";
}
}
//点击按钮,返回顶部
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
使用jQuery实现回到顶部按钮功能,距离顶部一定距离时出现,点击后,回到顶部