jquery - 如何通过上边距专注于输入

Question

我正在进行表单验证，当用户未填写必填字段之一时，我希望页面的位置集中在该输入上，但我不希望输入字段直接位于浏览器框架的顶部，我想要在之间留一些空格，以便也可以看到输入表单的标题。

这就是仅使用focus()时的样子

但我想要这样:

这个想法是让打字光标集中在输入字段上。

编辑:如果可以使用动画焦点那就太棒了。有什么建议如何做到这一点吗？

Answer 1

使用 jQuery 的一种方法:将窗口滚动到标签的垂直偏移。

$(function(){
    $(window).scrollTop($("label").offset().top);
    $("input").focus();
});

或者滚动到带有一些额外边距的输入元素:

$(function(){
    $(window).scrollTop($("input").offset().top - 100);
    $("input").focus();
});

(注意:用正确的选择器替换“输入”和“标签”)