HTML代码:
<a href=" " class="back-to-top">返回顶部</a >
CSS代码:
.back-to-top {
display: none; /* 默认隐藏按钮 */
position: fixed; /* 固定位置 */
bottom: 20px;
right: 20px;
width: 80px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #ccc;
border-radius: 20px;
color: #fff;
font-size: 16px;
}
.back-to-top:hover {
background-color: #999; /* 鼠标移入时变色 */
}
JS代码:
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 根据滚动位置是否大于一定值来控制按钮的显示与隐藏
if(scrollTop > 100) {
document.querySelector('.back-to-top').style.display = 'block';
} else {
document.querySelector('.back-to-top').style.display = 'none';
}
}
document.querySelector('.back-to-top').onclick = function() {
// 点击按钮时回到顶部
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var speed = Math.floor(scrollTop / 20);
var timer = setInterval(function(){
if(scrollTop > 0){
document.documentElement.scrollTop = document.body.scrollTop = scrollTop - speed;
scrollTop = scrollTop - speed;
}
else {
clearInterval(timer);
}
}, 20);
}