内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用
我使用简单的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>