制作一个回到顶部按钮，当滚动条滚动到大于300px位置时显示出来，小于300px位置时隐藏。（考点：滚动事件、if分支、样式操作）
滚动scroll的方法和事件属于window对象下的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 1000vh;
}
div {
width: 100px;
height: 100px;
background: pink;
text-align: center;
line-height: 100px;
color: #fff;
position: fixed;
bottom: 20px;
right: 20px;
display: none;
}
</style>
</head>
<body>
<h1>顶部</h1>
<div>回到顶部</div>
<script>
let divNode = document.querySelector("div");
divNode.addEventListener("click", function () {
// 设置周期定时器，每个0.5s回300px
let timer=window.setInterval(function(){
if(scrollY<=0){
window.clearInterval(timer);
}
scrollTo(0, scrollY-300);
},500)
})
// scroll事件是属于BOM顶层对象window下的
window.addEventListener("scroll", function () {
if(scrollY>300){
divNode.style.display="block";
}else{
divNode.style.display="none";
}
})
</script>
</body>
</html>
扫一扫
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
