Question

我在页面中有一个html表单，一堆文本和一个锚标记到页面末尾的表单。现在行动非常突然。

我想要以下两件事。

从页面底部滚动到顶部平滑（我查看了一些javascript选项，但它们没有工作）。
当滚动发生时，我希望它专注于表单中的第一个字段（名字字段）

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

平滑滚动到锚标记并专注于第一个字段表单

1 个答案: