Question

我有以下代码段将我的表单滚动到第一个错误：

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

我的jquery验证代码末尾的完整块如下所示。如果提交时出现错误，则会将表单滚动到第一个错误。

var $errors = $(".mcError");
if($errors.size() > 0){
    if(settings.mcScrollToError){
        $('html,body').stop().delay(500).animate({scrollTop: $errors.filter(":first").offset().top -30},'slow');
    }
    return false;
}
else{
    mcResponse('', false);
    return true;
}

但是，如果我将$('html,body')替换为容器元素的名称（例如div class $('.myDivClass')），则它似乎不能正常工作。它只是滚动到随机位置。

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

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

Answer 1

.offset()：

获取匹配集中第一个元素的当前坐标元素，相对于文档。

来源：http://api.jquery.com/offset/

您想使用.position()获取相对位置::

获取匹配集中第一个元素的当前坐标元素，相对于偏移的父元素。

来源：http://api.jquery.com/position

例如：

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

JQuery动画scrollTop容器

1 个答案: