返回顶部定时器清除无效问题

时间:2021-02-12 18:03:13

在做点击‘’返回顶部’’缓动滚到顶部的小案例中,出现了设置的定时器无法清除的bug,而且返回顶部后

鼠标往下滚页面也无反应。

源代码:

window.onload = function(){
window.onscroll = function(){
var top = scroll().top;
if(top>0){
  $("back").style.display = "block";
}else{
  $("back").style.display = "none";
}
}
  var begin = 0,end = 0;timer = null;
  begin = top;
  $("back").onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
begin = begin + (end - begin)* 0.2
window.scrollTo(0,begin);
if(Math.round(begin) == end){
clearInterval(timer);
};
},40)
}
}

出现原因:top是局部变量,并没有赋值给begin;

解决办法:将begin = top写到onscroll中或者把监听点击事件写到onscroll(此时begin和end要设置成全局变量)中。