1

我有以下 jQuery 片段

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

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

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

我正在撕扯头发，试图弄清楚这种行为。

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

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

谢谢你的帮助。

4

2 回答 2

2

我从onemade.com 上的一篇文章中摘录了一些内容：

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

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

编辑：

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

于 2013-01-03T01:01:13.570 回答
0

所以我的解决方案如下

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

});

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

于 2013-01-03T09:23:43.570 回答