JQuery动画scrollTop不能正常工作

Question

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

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

但是,如果我用$('html,body')一个容器元素的名称替换,例如$('.myDivClass')具有固定定位的div类,它似乎不能正常工作.每次提交都会向上和向下滚动到随机位置.如果容器元素不是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

如果您正在滚动窗口以外的其他内容，那么您需要找到错误相对于其容器的位置。在本例中是一个 div。如果元素位于 div 中，则使用position它将引用具有相对、固定或绝对定位的第一个父元素。

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