Javascript 如何关注多个文本框并滚动到它

我在表单中有很多文本框，在提交时会添加一个类 然后，该类将获得一个

：第一个
选择器以及
.focus（）
，以将焦点放在未接收任何输入但会切断文本框上方消息的文本框上

那么，如何将滚动条与文本框上的
.focus（）
一起移动呢？
在文本框的
focus
事件处理程序中，获取文本框的坐标，并使用jQUery
scrollLeft/scrollTop
相应地滚动页面

示例（起点，可能需要改进）：

function scrollToTextbox(id) {
  var coords = $('#' + id).offset();
  $(document).scrollLeft(coords.left);
  $(document).scrollTop(coords.top);
}

注意：根据页面中标记和样式的使用方式，您可能需要稍微调整滚动条（通过添加几个像素或通过减法）。
您使用过吗？我很幸运它能解决类似的任务。
像这样的东西是你想要的，对吗

$(function() {

    $('input, textarea').each(function() {
        var os = $(this).offset().top;
        $(this).bind('focus', function() {
            $('html,body').animate({scrollTop: os}, 300);
        });
    });

});

当您聚焦输入或文本区域时，它将滚动至该区域

这里有一把小提琴正在演奏：

编辑

$(function() {
    $('#submit').click(function(e) {
        e.preventDefault();
        $('input').each(function() {
            if($(this).hasClass('error')) {
                var firstError = $('.error:first');
                $('html,body').animate({scrollTop: firstError.offset().top}, 300);
                firstError.focus();   
            } 
        });
    });
});

（点击底部的提交按钮）

好的，我将它更新为我认为您想要的内容。
您是否可以详细介绍一下如何获取文本框的坐标，然后实现scrollTop？添加了一个示例。这应该让你开始。如果我有多个文本框呢？因为我将焦点的class.haserror添加到每个未填充的文本框中，所以如果它已填充，我显然不希望它滚动并将焦点移到上面的文本框中？如果这有道理的话…我不确定我是否理解你的观点。你是说你想滚动到包含类hasError的输入吗？是的，因此如果用户没有填写文本框，它会添加类hasError，这样他们可以有多个包含该类的文本框，我想滚动到与该类类似的文本框。hasError:first.focus。。。希望这样做更有意义啊类似的事情，除了相反。。。由于submit按钮位于表单底部，因此需要向上滚动到包含ie类的文本框。haserror:首先，如果没有该类，则不会滚动到该类，如果他们都有该类或某些类，则滚动到第一个。。。