Question

以下JQuery代码将页面滚动到表单中的第一个错误：

$('html,body').stop().delay(500).animate({scrollTop: $errors.filter(":first").offset().top -30},'slow');

但是，如果我将$('html,body')替换为具有固定定位的容器元素（例如div class $('.myDivClass')）的名称，则它似乎不能正常工作。每次提交时，它都会向上和向下滚动到随机位置。如果容器元素不是html，body，那么它似乎不能正常工作。

我无法弄清楚我做错了什么。

容器元素的css看起来像这样（所以你知道我的意思）：

.mcModalWrap1{
position:fixed;
top:0;
left:0;
width:100%;
padding:50px;
background-image:url(images/overlay.png);
overflow:auto;
z-index:999;
display:none;
}

我尝试使用position（）而不是offset（）来进行相对定位，但它没有什么区别。

谢谢！

更新：看起来没有解决方法。

Answer 1

我知道我在派对上已经很晚了，但遇到了同样的问题，这就是我修复它的方法。

在固定定位元素内滚动时，由于某种原因，您必须将其自己的scrollTop添加到要滚动的位置，因此：

var position = $errors.filter(":first").position().top + $('. myDivClass').scrollTop()
$('.myDivClass').animate({ scrollTop: position })

为我工作。

Answer 2

我遇到了同样的问题。它只适用于第一次通话。

要解决此问题，您需要在调用animate（）之前每次都滚动到顶部。

所以我改变了我的：

$(element).animate({scrollTop: 500});

与

$(element).scrollTop(0);
$(element).animate({scrollTop: 500});

是的，这是真的，每次它首先滚动到顶部，但没有动画，对我来说效果很好。

希望它有所帮助。

Answer 3

如果要滚动窗口以外的其他内容，则需要找到错误相对于其容器的位置。在这种情况下一个div。如果元素在div中，则使用position代替，它将引用具有相对，固定或绝对定位的第一个父元素。

$('.mcModalWrap1')
     .stop()
     .delay(500)
     .animate({scrollTop: $errors.filter(":first").position().top -30},'slow');

Answer 4

通过抛弃这个想法解决了这个问题。 JQuery scrollTop在除html以外的父容器中不起作用，正文滚动到特定位置。它只能滚动到顶部或底部。 position（）和offset（）都没有正确计算值。

如果有人有答案，我很想知道。

Answer 5

请尝试替换以下代码行，以查看其行为是否符合您的要求：

$('#container').stop().delay(500).animate({scrollTop: $errors.filter(":first").offset().top - $('#container').offset().top + $('#container').scrollTop()},'slow');

我相信您可以将$errors.filter(":first").offset().top - $('#container').offset().top部分替换为$errors.filter(":first").position().top。

JQuery动画scrollTop不能正常工作

5 个答案: