在做点击‘’返回顶部’’缓动滚到顶部的小案例中,出现了设置的定时器无法清除的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要设置成全局变量)中。