javascript - 如何在 Fancybox 叠加层内滚动？

Question

我正在使用 jQuery Fancybox (v2.1.5) 在模式框中打开表单。单击提交按钮后，我想滚动到第一个无效字段。我已经建立了一个代码库来处理表单的验证和我需要的其他东西。除了滚动部分，一切似乎都很好。

这似乎微不足道，但我无法让它工作。我已经建立了一个我想要实现的简化示例。

这是代码：

HTML

<a class="fancybox" href="#modalform">Open modal form</a>

<form id="modalform">
    <ul>
        <li>
            <label id="email-label" for="email">Email</label>
            <input id="email" type="text" />
        </li>
        <li>
            <label id="password-label" for="password">Password</label>
            <input id="password" type="password" />
        </li>
    </ul>

    <input type="submit" value="Log In" />
</form>

CSS

#modalform {
    display: none;
    position: relative;
    width: 200px; height: 1000px;
}

ul li:not(:first-child) {
    margin-top: 1em;
}

label {
    display: block;
}

input {
    width: 100%; height: 2em;
}

input[type="submit"] {
    position: absolute;
    bottom: 0; left: 0;
}

JavaScript（使用 jQuery 1.x）

$('.fancybox').fancybox({
    autoResize: false,
    fitToView: false
});

$('input[type="submit"]').click(function () {
    $('input:not([type="submit"])').each(function () {
        var targetId = $(this).attr('id') + '-label';

        if ($(this).val().trim() === '') {
            // TODO: scroll to #targetId
            // Doesn't work (obviously?), but shows what I'm trying to achieve
            $(document).scrollTop($('#' + targetId).offset().top);
            // Note: document may not be the correct element to select,
            // but it doesn't work either with the other elements I've tested

            return false;
        }
    });

    return false;
});

这个例子在 JSFiddle 上：http: //jsfiddle.net/eYtme/。

你能让它工作吗？

Answer 1

$('.fancybox-overlay')是您要选择的，而不是document.

$('.fancybox-overlay').scrollTop($('#' + targetId).offset().top);