如何控制HTML 5表单验证的滚动顶部?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (131)

我使用简单的HTML 5表单验证来要求输入:

<input type="text" required>

但是,页面上有一个固定的标题,并在块下面显示错误输入。有没有办法控制scrollTop在整个网站上的验证事件?

代码:https://codepen.io/anon/pen/vaLeox

提问于
用户回答回答于

像这样的怎么样?简单快捷,但我不知道它在移动设备或平板电脑上的效率有多高。如果你希望它更精确,请使用数组或存储窗口值,然后等待更改后再向下移动。

$("#submit").click(function(){
  setTimeout(function(){
    var win_scroll_y = $(window).scrollTop();
    $(window).scrollTop(win_scroll_y - 60); // Change to move closer to top or further
  },50)
})   
input {
  display: block;
  margin-bottom: 50px;
  }
header {
  position :fixed;
  top :0;
  right :0;
  left :0;
  background :green;
  width :100%;
  height :50px;
}
form{
  padding-top :50px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <header></header>
  <form action="">
    <input type="text" required value="first">
    <input type="text" required>
    <input type="text" required>
    <input type="text" required>
    <input type="text" required>
    <input type="text" required>
    <input type="text" required>
    <input type="text" required>
    <input type="text" required>
    <input type="text" required>
    <button type="submit" id="submit">Send</button>
  </form>
</main>

扫码关注云+社区

领取腾讯云代金券