Question

我有以下jQuery代码段

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

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

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

我正在试图弄清楚这种行为。

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

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

感谢您的帮助。

Answer 1

我从an article on oncemade.com中选择了一些内容：

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

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

编辑：

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

Answer 2

所以我的解决方案如下

我有一个容器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');

});

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

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

2 个答案: