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

Question

我有以下jQuery片段

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

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

这可以很好地将页面滚动回到菜单上方的顶部，但首先页面似乎会突然跳到最底部(除非您已经在最底部)，然后才会像应该的那样向上滚动？

我正绞尽脑汁试图弄清楚这种行为。

除了给出一个网站的链接，我不知道还能怎么解释：http://tinyurl.com/apdloyl

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

谢谢你的帮助。

Answer 1

所以我的解决方案如下

我有一个容器div，#main，它在CSS中设置的高度是'auto‘。

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

当内容被删除时，浏览器窗口会缩小，因此您总是被推到页面的底部。

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

类似于：

/* 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');

});

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

Answer 2

我从an article on oncemade.com那里学到了一些东西

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

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

编辑：

在进一步查看所提供的链接之后，可能还有另一件事导致了这个小故障。在设置滚动动画之前，请尝试等待结果完全加载。从我的角度来看，这不应该是很长的等待。或者，先滚动，然后重新加载内容，也可以在滚动之前设置加载微调器。为了解释，我认为故障是由滚动过程中页面大小的变化引起的。