javascript - 显示/隐藏div-滚动到激活的div

我做了一些显示/隐藏功能。一次只能打开一个手风琴。我遇到的问题有时是当一个新的文本打开时，文本将下降一半。因此，它不会在手风琴开始时出现。我希望它滚动到打开的手风琴的顶部。

这是一个示例：http://jsfiddle.net/e6fpfa68/

<a class="showBtn">BUTTON</a>
<div class="hideme">
  <h1>HTML Ipsum Presents</h1>
</div>

<a class="showBtn">BUTTON 2</a>
<div class="hideme">
  <h1>HTML Ipsum Presents</h1>
</div>

jQuery的：

$('.showBtn').click(function() {
  //$('.hideme').hide();
  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
    $('.hideme').slideUp();
  } else {
    $('.hideme').slideUp();
    $('.showBtn').removeClass('active');
    $(this).addClass('active');
    $(this).next().filter('.hideme').slideDown();
  }
});

我一直在尝试弄乱：

$('html, body').animate({scrollTop: scroll_to}, 2000);

但是它没有给出正确的结果（http://jsfiddle.net/e6fpfa68/2/）。

实现此功能的最佳方法是什么？

最佳答案

您在第二个小提琴中的方法非常好。使用jQuery.position（）作为第二个动画的目标，但更重要的是，您必须在第一个动画完成后执行它，在它的回调中：

$('.showBtn').click(function() {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
    $('.hideme').slideUp();
  } else {
    $('.hideme').slideUp();
    $('.showBtn').removeClass('active');
    $(this).addClass('active');
    $(this).next().filter('.hideme').slideDown(400, function() {
      $('html, body').animate({scrollTop: $(this).position().top}, 400);
    });
  }
});

http://jsfiddle.net/e6fpfa68/8/