问jQuery .animation()函数运行两次行，但无法工作。

EN

$("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();
});

$("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>