javascript - 平滑滚动到 anchor 标记并关注第一个字段表单

Question

我在页面中有一个 html 表单，一堆文本和页面末尾表单的 anchor 标记。现在的 Action 很突然。

我想要以下两件事。

1. 使从页面底部到顶部的滚动平滑(我查看了一些 javascript 选项，但它们没有用)。

2. 当滚动发生时，我希望它专注于表单中的第一个字段(名字字段)

HTML 字段:

<form id="register">
<label for="Name"><strong> Your Name:</strong></label>
<input type="text" id="Name_First" name="Name_First" required>
<input type="text" id="Name_Last" name="Name_Last" required>   

<label for="Email">Email Address:</label>
<input type="email" id="Email" name="Email" vrequired>

<label for="RegPassword">Password:</label><input type="password" id="RegPassword" name="RegPassword" required>
<form>  

<a href="#register"> Fill out the form </a></p> 

JSFiddle:http://jsfiddle.net/co1ot6ru/

有什么办法可以做到吗？任何帮助深表感谢。谢谢!

Answer 1

单击时，animate()将正文滚动到顶部，完成后，focus()在第一个输入上。

$('a[href="#register"]').click(function(e){

    e.preventDefault(); 

    $("html, body").animate({ scrollTop: "0px" }, 1000, function(){

        $('input#Name_First').focus();

    });   

});

在 jQuery 中，您可以根据属性的值进行选择，例如 a[href="#register"]

你必须focus()当动画完成或者两者同时触发并且页面跳转

jsFiddle Demo