简介:在HTML的制作中,在向下滚动以后,屏幕右下角出现TOP按钮,按下后页面回到顶部。
思考:
1.最开始的时候应该默认TOP按钮为hidden (因为最开始页面并没有滚动)
2.在js中获取到当前页面的高度
3.按下TOP按钮后,回到顶部。
4.用js实现滚动回去,而不是瞬间回去
1.TOP按钮的定义方法:
#top {
visibility: hidden;
position: fixed;
bottom: 120px;
right: 80px;
width: 40px;
height: 40px;
color: #fff;
background-color: #FFA500;
border-radius: 5px;
z-index: 999;
text-align: center;
line-height: 40px;
cursor: pointer;
}
2. leader = window.pageYOffset;
3.
$("#top").click(function() {
var timer = setInterval(() => {
leader = leader + (target - leader) / step;
// window.screenTop(0,leader);
window.scrollTo(0, leader);
if(leader == 0) {
clearInterval(timer);
}
}, speed);
})
4.
window.onscroll = () => {
leader = window.pageYOffset;
console.log(leader);
if(leader > 0) {
$("#top").css("visibility", "visible");
} else {
$("#top").css("visibility", "hidden");
}
}