如何在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);