当我点击一个锚点时，我一直在尝试使用一个功能将页面滚动到页面的顶部。我的jQuery脚本如下所示：
$("a#drop-user-box").click(function()
{
console.log("foor"); //Would return foo value once
$("html, body").animate({scrollTop: 0}, "slow", function()
{
//console.log("foor"); Would return foo value twice?
// Code doesn't work when in here
// $(".drop-down").toggleClass('hidden');
// $(".drop-down input[type='e-mail']:first-of-type").focus();
});
// Code does work when in here
// $(".drop-down").toggleClass('hidden');
// $(".drop-down input[type='e-mail']:first-of-type").focus();
});
在animate()函数之外和其中执行代码片段有什么区别？当下拉列的两行在.animate()函数内时，为什么代码不起作用？请解释一下这是如何运作的。
提前致谢，
修改
我将如何使这项工作？：
$("a#drop-user-box").click(function(e) {
e.preventDefault();
$("html, body").animate({
scrollTop: 0
}, "slow", function() {
$('.drop-down').show();
});
});.user-box .drop-down
{
padding: 15px 25.5px;
display: block;
border: 1px solid #aaa;
background-color: #fff;
}
.user-box .drop-down form
{
width: 250px;
}
.space
{
border: 1px solid #000;
height: 900px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drop-down hidden">
<form action="" method="post">
<div class="form-group">
<input type="e-mail" class="form-control text-box single-line" name="E-mail" placeholder="E-mail adres">
</div>
<div class="form-group">
<input type="password" class="form-control text-box single-line" name="Wachtwoord" placeholder="Wachtwoord">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Bewaar login informatie
</label>
</div>
<input type="submit" class="btn btn-default" value="inloggen">
</form>
<a href="#">Wachtwoord vergeten?</a>
</div>
<div class="space">
</div>
<a href="#" id="drop-user-box">Foo</a>