var isTop = true;...-慕课网

var isTop = true; window.onscroll=function(){ if (!isTop) { clearInterval(time); }; isTop= false; } 这段代码表示没看懂，哪位朋友能帮我指点一二啊

不及回顾

2014-05-08

源自：回到顶部效果 4-1

关注问题我要回答

1860

操作

收起

4 回答

PaddingMe
2014-05-11

首先你点击回到顶部时，滚动条开始往回滚，这时候istop为true,因为滚动条滚动触发window.onscroll 事件，!istop为false不执行clearInterval(timer);但是下面的isTop=false;再将isTop置为false。这时候你人为滚动鼠标，则再次触发window.onscroll 事件，此时！istop为true 执行clearInterval(timer);则滚动条停下来

8 回复有任何疑惑可以回复我~

#1

下面的isTop=false;再将isTop置为false，这时候人为滚动鼠标和下面的定时器都同时还在运行吧，为什么不是在这在之前定时器先把isTop置为true呢，怎么可以通过人为滚动鼠标就直接认定isTop=false，而不用再经过下面的定时器isTop=true，毕竟它是{ if (!isTop) { clearInterval(time); }; isTop= false; } ，而不是{ isTop= false; if (!isTop) { clearInterval(time); };} 求解

2014-10-05 回复有任何疑惑可以回复我~

#2

是不是因为定时器需要30ms的时间来反应，而人为滚动鼠标是一系列的动作，定时器还来不及把isTop设置为true，onscroll就已经连续触发了

2014-10-05 回复有任何疑惑可以回复我~

哑剧
2015-02-04

我不同意一楼的答案，因为window.scroll是连续执行多次的

测试方法：

执行效果就是：

每50ms执行一次滚动，但是一滚动就会停止，说明window.scroll是执行多次的。

接下来分析代码

实际的执行顺序：

1.执行setInterval事件，由于有isTop=true，所以当执行下一次scroll的时候，isTop是ture

2.执行onscroll，先执行if(!isTop)判断，然后在给isTop 赋值 false,重复执行1

3.当有人为滚动，重复执行2,（此时因为isTop 赋值为false，故if(!isTop) 是，结果为真，即执行clear操作），此时isTop 应为false

证明：

执行结果（我向下滚动，前面的4代表执行了4次if判断）

3 回复有任何疑惑可以回复我~

#1

正解。不过感觉加这个效果没啥用处。

2015-09-08 回复有任何疑惑可以回复我~

Sunshine518
2014-10-05

下面的isTop=false;再将isTop置为false，这时候人为滚动鼠标和下面的定时器都同时还在运行吧，为什么不是在这在之前定时器先把isTop置为true呢，怎么可以通过人为滚动鼠标就直接认定isTop=false，而不用再经过下面的定时器isTop=true，毕竟它是{ if (!isTop) { clearInterval(time); }; isTop= false; } ，而不是{ isTop= false; if (!isTop) { clearInterval(time); };} 求解

0 回复有任何疑惑可以回复我~

rlman
2014-05-09

意思就是只有当滚动条到达顶部的时候才取消定时器，取消定时器后就不会出现滑到中间强行向上的情况。这里的isTop=false 还有定时器里的isTop=true就是保证在没滚动到顶端前定时器不被取消，就是连续滚的意思。我也是初学者，说的比较啰嗦，不知道对不对，希望相互学习

1 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

回到顶部效果

参与学习 44211 人
解答问题 206 个

回到顶部网站不可缺少的一部分，用JS实现炫酷拉风的回到顶部效果

我要回答关注问题

意见反馈帮助中心 APP下载