如何使验证自动滚动到顶部的第一个错误但不跳转到第一个无效错误？答案

【问题标题】：How to make validation auto scroll to first error on top smoothly but not jumping to the first invalid error?如何使验证自动滚动到顶部的第一个错误但不跳转到第一个无效错误？
【发布时间】：2018-09-26 06:56:37
【问题描述】：

我尝试过的是这样，但它不起作用滚动仍然跳到无效的错误验证。请帮我解决这个问题。

$(document).ready(function () {
$('#submit').click(function(){
    $('html,body').animate({scrollTop: 0},800);
    return false;
  });
});

我在 google 中尝试了很多示例，但似乎都无法正常工作。

【问题讨论】：

标签： jquery autoscroll

【解决方案1】：

问题：

您想在验证检查中使用平滑滚动
您想在第一个无效错误字段上添加焦点

解决方法：需要使用jquery animate scrolltop回调函数，只有在完成动画后才会触发。

查看以下示例：

$('#submit').click(function () {
    $('html,body').animate({ scrollTop: 0 }, 800
        , function(){
            if ($('#tb1').val() == '') { $('#tb1').focus(); return; }
            if ($('#tb2').val() == '') { $('#tb2').focus(); return; }
            if ($('#country').val() == '--select country--') { $('#country').focus(); return; }
    });
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Name : <br />
<input type="text" id="tb1" required />
<br />

Age :<br />
<input type="text" id="tb2"  required />
<br />

Country :<br />
<select id="country">
<option>--select country--</option>
<option>India</option>
<option>USA</option>
<option>UK</option>
<option>China</option>
</select>

<br /><br /><br /><br /><br /><br /><br /><br />
<button id="submit">Click here!</button>

【讨论】：

只是想问一下它是否也适用于选择选项验证？？
@stephanielou, <select> 选项应用于上述示例，请检查。