Question

我有这个相当流行的代码：

jQuery(document).ready(function($) {
    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
});

在html中：

<a href="#scrollThere">Click</a>

转到

<div class="scroll" id="scrollThere"></div>

但是在一个页面网站上，当div处于不同的高度时，即滚动必须使用不同的长度 - 滚动有时要快得多，有时甚至很慢。什么样的代码会使te滚动总是时间=速度*距离，而不是 time = lentgh in ms 或换句话说，我怎样才能达到始终相同的速度？< / p>

Answer 1

将您的持续时间与您必须移动的像素相关联。

代码中的持续时间锁定在500。如果我获得必须在任一方向上移动的像素数量并将其乘以几毫秒，您就可以获得页面滚动的设定速度。

替换它：

$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);

有了这个：

$('html,body').animate({scrollTop:$(this.hash).offset().top}, 
    Math.abs(window.scrollY - $(this.hash).offset().top) * 10);

修改上面的10以增加或减少持续时间。

jQuery smooth scroll snippet以不同的速度工作

1 个答案: