为啥.animate to scrollTop 在动画之前会跳转到0？

Posted 2023-05-08

【中文标题】为啥.animate to scrollTop 在动画之前会跳转到0？

【英文标题】：Why does .animate to scrollTop jump to 0 before animating?为什么.animate to scrollTop 在动画之前会跳转到0？

【发布时间】：2012-01-09 06:46:08

【问题描述】：

我正在玩 that nike site 上的视差滚动。所以我一直在使用scrollTop 来确定用户在页面上的垂直位置，然后我一直在根据对该值的更改来调整元素的位置。

在这里，我将 scrollTop 值四舍五入并记录下来。稍后我会显示日志。

var distance = 60*(Math.round($(window).scrollTop()/60));
console.log(distance);

然后，在点击时，我调用此函数滚动到我传递给它的 scrollTop 值。

function goTo(n)
    console.log('begin animating');
    $('html,body').animate(scrollTop: n,2000);

问题来了，滚动顶部的值在动画之前跳转到 0。

所以我会在页面的一半处记录：

begin animating
0
6240
6180
6120
// etc...

我定位东西的方式依赖于 scrollTop 值的准确性。所以我的问题是：

如何让 scrollTop 值在动画结束之前不跳转到 0？

如果需要更多信息，请告诉我。 这是该网站的实时版本：http://theblueeyeguy.com/moon/Illumination/

（点击“下一个”然后点击“上一个”打破它）

【参考方案1】：

可能是因为您使用的是带有href="#" 的链接。

将return false; 添加到您的onclick 属性中。

<a href="#" onClick="goTo(2160);return false;">< Prev | </a>