向上滚动到某个div

Question

比如说，我有两个<div>：

<div id="profile">
  <button id="btn1">Go to payment</button>
</div>

<div id="more_profile" style="display:none;">
  <!-- input forms here -->
</div>

<div id="domain" style="display:none;">
  <!-- input forms here -->
</div>

<div id="payment">
  <button id="btn2">Go back to profile</button>
</div>

我使用此js剪辑脚本动画滚动到 #payment ：

$('#btn1').click(function() {
  $('#more_profile').css('display', 'block');
  $('#domain').css('display', 'block');
  $('html, body').animate({ scrollTop: $('#payment').offset().top }, 700);
});

它完美无缺。但是，如果我做相反的事情：

$('#btn2').click(function() {
  $('#more_profile').css('display', 'none');
  $('#domain').css('display', 'none');
  $('html, body').animate({ scrollTop: $('#profile').offset().top }, 700);
});

点击＃btn2 向上滚动回 #profile <div>动画似乎无效。它就像实例的闪现一样。