Question

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

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

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

Answer 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>

如何使验证自动平稳地滚动到第一个错误，但又不跳到第一个无效错误？

1 个答案: