jQuery 平滑滚动片段以不同的速度工作

Posted 2023-05-09

【中文标题】jQuery 平滑滚动片段以不同的速度工作

【英文标题】：jQuery smooth scroll snippet works with different speed

【发布时间】：2014-01-21 05:12:02

【问题描述】：

我得到了这个相当流行的代码：

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 处于不同的高度时，即滚动必须以不同的长度进行 - 滚动有时快得多，有时又很慢。什么样的代码可以让滚动始终时间 = 速度 * 距离，而不是 time = lentgh in ms，或者换句话说，我怎样才能始终保持相同的速度？

【问题讨论】：

我通常不会对这样的问题投赞成票，但我这样做是为了平衡被误导的投反对票。

【参考方案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 以增加或减少持续时间。

【讨论】：

非常感谢！这个答案非常适合像我这样的菜鸟，而且效果很好。

太棒了。很高兴我能帮上忙。

Math.pow(Math.abs(window.scrollY - $(this.hash).offset().top),2/3)*5) 为您提供更好的大规模高度滚动，在我的情况下超过 60k 像素 ...