JQuery动画滚动顶部无法正常工作

Question

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

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

但是，如果我将$('html,body') 替换为容器元素的名称，例如具有固定定位的div 类$('.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

请尝试替换这行代码，看看它的行为是否符合您的要求：

$('#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。

Answer 2

我知道我迟到了，但遇到了同样的问题，这就是我解决它的方法。

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

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

为我工作。

Answer 3

我遇到了同样的问题。它仅在第一次调用时有效。

要解决这个问题，您需要在每次调用 animate() 之前滚动到顶部。

所以我改变了我的：

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

与

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

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

希望对你有帮助。

Answer 4

通过转储想法解决了问题。 JQuery scrollTop 在 html,body 以外的父容器中不能滚动到特定位置。它仅适用于滚动到顶部或底部。 position() 和 offset() 都不能正确计算值。

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

Answer 5

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

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