Question

我在表单底部有一个带有提交按钮的长表单。我在标有必需属性的表单中有多个输入字段。因此，当前几个输入字段中的一个留空并向下滚动以单击提交时，错误“请填写此字段”正确显示在浏览器顶部的第一个错误。但是，我必须向上滚动到顶部才能输入输入。如何让它自动向上滚动以关注第一个输入错误？

Answer 1

使用jQuery有一种简单的方法。

$('html, body').animate({
    scrollTop: $("#target-element").offset().top
}, 1000);

如果您不想要动画，请改用.scrollTop()：

$('html, body').scrollTop($("#target-element").offset().top);

来源：http://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2/

如果你反对jQuery，你可以使用window.scrollTo()

推出自己的解决方案

Answer 2

请避免使用动画功能，因为要花一些时间专注于元素，但气球首先出现，因此最好的方法是这样。

function scrollToInvalid(form) {
var navbar = $('.nav-wrapper');

// listen for `invalid` events on all form inputs
form.find(':input').on('invalid', function(event) {
    var input = $(this)

    // the first invalid element in the form
    var first = form.find(':invalid').first()

    // only handle if this is the first invalid input
    if (input[0] === first[0]) {
        // height of the nav bar plus some padding
        var navbarHeight = navbar.height() + 50

        // the position to scroll to (accounting for the navbar)
        var elementOffset = input.offset().top - navbarHeight

        // the current scroll position (accounting for the navbar)
        var pageOffset = window.pageYOffset - navbarHeight

        // don't scroll if the element is already in view
        if (elementOffset > pageOffset && elementOffset < pageOffset + window.innerHeight) {
            return true
        }

        // note: avoid using animate, as it prevents the validation message displaying correctly
        $('html,body').scrollTop(elementOffset)
    }
});
}
// call it like this
var form = $('#contact-form')   //your form element
scrollToInvalid(form);

Answer 3

您可以在表单元素附近（之前或之后）添加<a>元素。当出现验证问题时，您将遵循表单元素旁边的链接。

如果您为<a>元素添加名称，则为

<a name="anchor"></a>

然后你可以通过;

去那个位置

<a href="#anchor"></a>

滚动到HTML5表单验证的第一个输入错误

3 个答案: