如何在jquery fadein之后滚动到div？

Question

在我的页面中，我有这样的内容和按钮：

<div id="1">
  ----some content----
</div>
<ul class="pager">
  <li class="next" id="tut2">
    <a href="#">Next Tutorial &rarr;</a>
  </li>
</ul>
<div id="2" style="display:none;">
  ----some content---
</div>

这是我的.js文件：

 $(document).ready(function(){
   $("#tut2").on('click', function(event){
    event.preventDefault();
    $("#1").fadeOut();
    $("#2").fadeIn(3000);
    return false;
   });
  });

淡入代码完美无缺。当内容淡入时，滚动只保留在底部。我想要的是该页面应该平滑滚动到div id=2或者在它渐渐消失之后滚动到顶部。

Answer 1

您可以为fadeIn提供一个功能，它将在动画完成后运行。例如：

$("#2").fadeIn(3000, function(){
    // scroll to #2
    $("html,body").animate({ scrollTop: $("#2").offset().top }, 1000);
});