jQuery 使用 .animate 滚动到顶部 - 先跳到底部？答案

【问题标题】：jQuery scroll to top with .animate - jumps to bottom first?jQuery 使用 .animate 滚动到顶部 - 先跳到底部？
【发布时间】：2023-04-07 22:51:02
【问题描述】：

我有以下 jQuery sn-p

$('html, body').animate({
    scrollTop: 178
}, 2000);

我在页面底部有一些分页按钮，当它们被点击时会触发一个 javascript 函数。在这个JS函数中，调用了上面的sn-p。

这可以很好地将页面滚动回菜单上方的顶部，但首先页面似乎会突然跳到最底部（除非您已经在最底部），然后再向上滚动应该?

我正在竭尽全力想弄清楚这种行为。

除了提供网站链接之外，我不知道如何解释它：http://tinyurl.com/apdloyl

加载结果后转到页面底部，稍微向上滚动，然后单击下一页按钮。当页面在向上滚动之前向下跳转时，就会发生奇怪的事情。

感谢您的帮助。

【问题讨论】：

标签： javascript jquery html scroll jquery-animate

【解决方案1】：

我从an article on oncemade.com那里拿了一些东西：

$('html:not(:animated),body:not(:animated)').animate(...);

示例：http://jsfiddle.net/ddthK/1/

编辑：

在查看了提供的链接之后，还有另一件事可能会导致故障。在动画滚动之前尝试等待结果完全加载。从我所在的地方来看，应该不会等太久。或者，先滚动，然后重新加载内容，或者在滚动之前设置加载微调器。解释一下，我认为故障是由于滚动期间页面大小的变化引起的。

【讨论】：

你给了我正确的想法——#main div 的高度设置为自动。一旦 ajax 内容被删除，浏览器窗口就会缩小，这导致了丑陋的混蛋。我首先将#main div 高度设置为当前高度，然后将动画滚动到顶部，最后将 div 高度重置为自动，从而解决了这个问题。有点迂回的解决方案，但效果很好:) 现在只需将其上传到服务器。
@jakew009 很高兴听到这个消息。很好的解决方案。

【解决方案2】：

所以我的解决方案如下

我有一个容器 div，#main，它在 CSS 中设置了“自动”高度。

当我的分页按钮被按下时，这个 div 的内容被擦除并通过 ajax 替换为新内容。

当内容被删除时，浏览器窗口缩小，结果你总是被撞到页面底部。

我的解决方法是立即获取 div 的高度，以固定格式将其设置为当前高度，滚动到顶部，然后在回滚完成后将 div 的高度重置为自动。

类似：

/* First we have to fix the height of the #main element to prevent a nasty looking jerk                      when the ajax content dissapears */
var height = $('#main').height();
$('#main').height(height);

/* Then we can scroll to the top */
$('html, body').animate({
scrollTop: 178
}, 2000, function() {

    /* Then reset height to auto */
    $('#main').css('height','auto');

});

可能还有其他更优雅的方法，但这对我有用

【讨论】：