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 回答