为了账号安全,请及时绑定邮箱和手机立即绑定

为什么改成负的就能滚到头

为什么改成负的就能滚到头

正在回答

2 回答


终于有人回我了,解释的非常清楚,非常感谢

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

回答这个问题前,先来看下为什么不改成负数就不行呢?

注意这句:var ispeed = Math.floor(osTop / 6); 

当上面osTop的值小于6这个除数时,ispeed的值始终等于0(向下取整了),所以问题来了,当ispeed的值不变时,osTop - ispeed 这个控制滚动条的值也就不变了,所以滚动条永远到不了顶。

实际中,当osTop = 5 时,ispeed 为 0,下面两句也始终为5:

document.documentElement.scrollTop = osTop - ispeed; // 兼容IE

document.body.scrollTop = osTop - ispeed; // 兼容FF、Chrome

所以滚动条一直停在距离顶部5px的地方。

OK,那为什么改成负数就行了呢?其实改负数的目的就是让ispeed的值不为0.

实际中,当osTop = 5(或小于5时),Math.floor(osTop / 6) 的值为 -1,这样就使得 osTop + ispeed 的值始终能减小下去,直至到0.

这种用负数的方法不好理解,我是采用Math.ceil()这个方法(向上取整)实现的,代码如下:

obtn.onclick = function(){

    // 定时器开启

    timer = setInterval(function(){

        // 获取当前滚动条距离顶部距离

        var osTop = document.documentElement.scrollTop || document.body.scrollTop;

        var ispeed = Math.ceil(osTop / 6);

        document.documentElement.scrollTop = osTop - ispeed;

        document.body.scrollTop = osTop - ispeed;

        if(osTop == 0){

            clearInterval(timer);

        }

    },30);

}


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

arlenhui

很棒,感谢
2015-05-10 回复 有任何疑惑可以回复我~
#2

yb2015

感谢细心的回答
2016-02-11 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
回到顶部效果
  • 参与学习       44211    人
  • 解答问题       206    个

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

进入课程

为什么改成负的就能滚到头

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信