为什么 // clearInterval(obj.timer)注释了 back点击后直接跳转没有滚动。而如果不注释的话就可以实现滚动效果这是为什么啊

浪奔的小三爷 2020-12-22 10:48:35

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.slider{
width: 30px;
height: 150px;
background-color: pink;
position: absolute;
left:50%;
margin-left:600px;
top:500px;
}
.header{
height: 300px;
background-color: chartreuse;
}
.banner{
height: 1000px;
background-color: cadetblue;
}
.main{
height: 1000px;
background-color: chocolate;
}
.back{
display: none;
position: absolute;
bottom: 0;
cursor: pointer;
}
.w{
width:1200px;
margin: 10px auto;
}
</style>
</head>
<body>
<div class="slider"><div class="back">返回顶部</div></div>
<div class="header w"></div>
<div class="banner w"></div>
<div class="main w"></div>
<script>
var slider=document.querySelector('.slider');
var header=document.querySelector('.header');
var banner=document.querySelector('.banner');
var main=document.querySelector('.main');
var back=document.querySelector('.back');
var top1=banner.offsetTop;
console.log(1);
var top1=slider.offsetTop-banner.offsetTop
document.addEventListener('scroll',function(){
if(pageYOffset>=banner.offsetTop){
slider.style.position='fixed';
slider.style.top=top1+'px';
}
else{
slider.style.position='absolute';
slider.style.top=500+'px';
}
if(pageYOffset>=main.offsetTop){
back.style.display='block';
}
else{
back.style.display='none';
}
back.addEventListener('click',function(){
animate(window,0);
})
function animate(obj,target){
// clearInterval(obj.timer)
obj.timer=setInterval(function(){
var step=(target-obj.pageYOffset)/10;
step=step>0? Math.ceil(step):Math.floor(step);
if(obj.pageYOffset==target){
clearInterval(obj.timer);
}
window.scroll(0, window.pageYOffset + step);
},15)
}
})
</script>
</body>
</html>

...全文