Question

我已经显示/隐藏了一些功能。一次只能打开一支手风琴。我遇到的问题有时候当一个新的文本打开时，文本将会减半。所以它不会成为手风琴的开始。我希望滚动到开放式手风琴的顶部。

<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/）。

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

Answer 1

你在第二小提琴的方法是相当不错的。使用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/

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

1 个答案: