滚动顶部动画后的滚动/滚动条锁定答案

【问题标题】：Scrolling/Scrollbar Locks After Scrolltop Animation滚动顶部动画后的滚动/滚动条锁定
【发布时间】：2023-03-06 18:00:01
【问题描述】：

我有一些锚点链接到页面内的特定部分（使用主题标签），以及滚动到文档窗口顶部或底部的锚点。

$("html, body").animate({ scrollTop: $(document).height() }, 2000);

但是，一旦动画和滚动到达目的地并完成，文档滚动和滚动条似乎会禁用几秒钟。例如，如果单击“转到页面底部”链接，我的文档窗口将正确滚动到页面底部。当我尝试向上滚动时，它会以一种紧张的动作上下晃动，并允许我稍后再滚动几次。

关于可能导致此问题的任何提示？

【问题讨论】：

标签： jquery scrolltop

【解决方案1】：

这个帖子很旧，但我遇到了这个问题并且没有任何答案，但这里有一个解决方案：

$(window).bind("mousewheel", function() {
    $("html, body").stop();
});

如果用户在动画执行时使用滚动条，它会停止动画。

【讨论】：

哇！这也解决了我的问题，非常感谢分享！ :)

【解决方案2】：

为了帮助 Scotty 的回答，您实际上还可以在 .stop() 方法中添加两个选项：clearQueue 和 jumpToEnd。

我遇到了滚动问题，并使用 Scotty 建议的 .stop() 开始，但注意到动画仍在“挣扎”完成。我在这里查看了文档：.stop() Method Documentation

通过添加.stop(true, false);，我能够：

1.) 删除排队的动画（以防多个被触发/级联）

2.) 防止动画尝试跳转到其结束值。

希望能帮助其他任何用头撞键盘的人;)

【讨论】：

【解决方案3】：

我也建议在“动画”之前添加$("html, body").stop();。

$("html, body").stop();
$("html, body").animate({ scrollTop: $(document).height() }, 2000);
$(window).bind("mousewheel", function() {
    $("html, body").stop();
});

【讨论】：

谢谢。对我来说这是必要的。