jQuery平滑滚动片段支持不同速度。

Question

jQuery平滑滚动片段支持不同速度。

6

我有一个非常流行的代码：

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的高度不同时，即滚动条必须走不同的长度时，滚动有时会快得多，有时则非常缓慢。什么样的代码可以使滚动始终为时间=速度*距离，而不是时间=毫秒中的长度，或者换句话说，我该如何始终实现相同的速度？

- Piotr Uchman

1

我通常不会给这样的问题点赞，但是为了平衡错误的负评，我还是点了赞。 - iambriansreed

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iambriansreed · Accepted Answer

将您的持续时间与需要移动的像素相对应。

代码中的持续时间被锁定为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以增加或减少持续时间。