老师我这段代码滚动事件失效是怎么回事？

来源：2-15 BOM特效开发（2）

JakePrim

2021-03-28 20:57:15

<!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>
*{
margin: 0;
padding: 0;
}
body{
height: 6000px;
background-color: gold;
}
.btn{
position: fixed;
bottom: 100px;
right: 50px;
cursor: pointer;
}
.box{
width: 400px;
height: 400px;
margin: 60px auto;
border: 1px solid orange;
}
.para{
width: 80px;
height: 80px;
background-color: red;
}
.content-part{
width: 500px;
background-color: #ccc;
margin: 10px auto;
}
.floor{
position: fixed;
right: 20px;
top: 100px;
height: 200px;
background-color: orange;
font-size: 17px;
}
.floor ul li{
width: 50px;
line-height: 40px;
height: 40px;
}
.floor ul li .current{
background: purple;
color: white;
}
</style>
</head>
<body>
<button id="btn" class="btn">返回顶部</button>
<div class="floor">
<ul id="list">
<li data-n="科技栏目" class="current">科技</li>
<li data-n="科技栏目1">科技1</li>
<li data-n="科技栏目2">科技2</li>
<li data-n="科技栏目3">科技3</li>
</ul>
</div>
<section class="content-part" style="height: 674px;" data-n="科技栏目">
科技栏目
</section>
<section class="content-part" style="height: 674px;" data-n="科技栏目1">
科技栏目1
</section>
<section class="content-part" style="height: 674px;" data-n="科技栏目2">
科技栏目2
</section>
<section class="content-part" style="height: 674px;" data-n="科技栏目3">
科技栏目3
</section>
<script>
//返回顶部按钮
var btn = document.getElementById('btn');
var timer;
btn.onclick = function(){
clearInterval(timer);//设表先关
timer=setInterval(() => {
//不断让scrollTop减少
document.documentElement.scrollTop -= 200;
if (document.documentElement.scrollTop == 0) {
//滚动到顶部停止定时器
clearInterval(timer);
}
}, 20);
}

//楼层导航效果
//offsetTop 某个DOM元素到定位祖先元素的垂直距离。在祖先中，离自己最近的且拥有定位属性的元素. 有定位就不好用了
var list = document.getElementById('list');
list.onclick =function(e){
if (e.target.tagName.toLowerCase()=='li') {
var n = e.target.getAttribute('data-n');

var contentPart = document.querySelector('.content-part[data-n='+n+"]")
console.log(contentPart.offsetTop);
document.documentElement.scrollTop = contentPart.offsetTop;
}
}
//遍历content-part的offsetTop推入到数组中
var arr = [];
window.onload = function(){
var contents = document.querySelectorAll('.content-part');
for(var i =0;i<contents.length;i++){
arr.push(contents[i].offsetTop);
}
console.log(arr);
}
//当前所在楼层
var nowFloor = 0;
window.addEventListener('scroll',function(){
var scrollTop = window.scrollY;
//遍历数组
for(var i = 0;i<arr.length;i++){
console.log("scrollTop:"+screenTop);
if (scrollTop >= arr[i] && screenTop < arr[i+1]) {
console.log(i);
break;
}
}
if(nowFloor != i){
console.log(i);
nowFloor = i;
}
},true);
</script>
</body>
</html>