javascript - 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);
});