Home >
front end > Why//clearInterval (obj. Timer) comments after the back click jump straight without scrolling. And i
Why//clearInterval (obj. Timer) comments after the back click jump straight without scrolling. And i
<meta charset="utf-8" & gt;
<meta name="viewport" content="width=device - width, initial - scale=1.0" & gt;
Document <style>
. The slider {
width: 30px;
Height: 150 px;
Background - color: pink.
position: absolute;
Left: 50%;
Margin - left: 600 px;
Top: 500 px;
}
The header {
height: 300px;
Background - color: chartreuse.
}
The banner {
Height: 1000 px;
Background - color: cadetblue;
}
. The main {
Height: 1000 px;
Background - color: chocolate;
}
. The back {
display: none;
position: absolute;
bottom: 0;
cursor: pointer;
}
W. {
Width: 1200 px;
Margin: 10 px auto;
}
</style>
<body>
<script>
Var the slider=document. QuerySelector (' the 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;
The console. The log (1);
Var top1=the slider. The offsetTop - banner. OffsetTop
Document. The addEventListener (' scroll ', function () {
If (pageYOffset>=banner. OffsetTop) {
The slider. Style. The position='fixed';
The slider. The style. The top=top1 + 'px';
}
The else {
The slider. Style. The position='absolute';
The slider. The style. The top=500 + 'px';
}
If (pageYOffset> .=the main offsetTop) {
='block' back. Style. The display;
}
The else {
='none' back. Style. The display;
}
Back. AddEventListener (' click ', function () {
The animate (window, 0);
})
The function the 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. The window scroll (0, pageYOffset + step);
15)},
}
})
</script>
