javascript - Bootstrap Accordion ，单击时滚动到事件(打开) Accordion 的顶部？

Question

我正在使用 Bootstrap 制作一个响应式网站，它包含带有大量文本的 Accordion ，当您阅读到底部并单击下一个 Accordion 时，大量文本被折叠并且我留在底部页面的。

我从 Bootstrap accordion scroll to top of active panel heading 中找到了这个有用的代码但它会滚动到所有 Accordion 的顶部，而不是打开的特定 Accordion 的顶部。

JS

$(function () {
    $('#accordion').on('shown.bs.collapse', function (e) {
        var offset = $('.panel.panel-default > .panel-collapse.in').offset();
        if(offset) {
            $('html,body').animate({
                scrollTop: $('.panel-heading').offset().top -20
            }, 500); 
        }
    }); 
});

如何修改此代码以滚动到当前事件的 Accordion 的顶部？

HTML

<div class="panel-group custom-padding no-sides" id="accordion">                
    <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
            <div class="panel-heading custom-padding">
                <h4 class="panel-title text-uppercase">Short synopsis <i class="fa fa-chevron-down pull-right"></i></h4>
            </div>
        </a>
        <div id="collapse1" class="panel-collapse collapse">
            <div class="panel-body">
                <p id="game-deck"></p>
            </div>
        </div>
    </div>                       
    <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
            <div class="panel-heading custom-padding">
                <h4 class="panel-title text-uppercase">Concepts <i class="fa fa-chevron-down pull-right"></i></h4>
            </div>
        </a>
        <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">
                <ul class="whatever" id="game-concepts"></ul>
            </div>
        </div>
    </div>                      
    <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
            <div class="panel-heading custom-padding">
                <h4 class="panel-title text-uppercase">Themes <i class="fa fa-chevron-down pull-right"></i></h4>
            </div>
        </a>    
        <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body" id="game-themes"></div>
        </div>
    </div>

    <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
            <div class="panel-heading custom-padding">
                <h4 class="panel-title text-uppercase">Notable locations<i class="fa fa-chevron-down pull-right"></i></h4>
            </div>
        </a>    
        <div id="collapse4" class="panel-collapse collapse">
            <div class="panel-body" id="game-locations"></div>
        </div>
    </div>

    <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">
            <div class="panel-heading custom-padding">
                <h4 class="panel-title text-uppercase">Notable characters<i class="fa fa-chevron-down pull-right"></i></h4>
            </div>
        </a>    
        <div id="collapse5" class="panel-collapse collapse">
            <div class="panel-body" id="game-characters"></div>
        </div>
    </div>

    <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">
            <div class="panel-heading custom-padding">
                <h4 class="panel-title text-uppercase">Full description <i class="fa fa-chevron-down pull-right"></i></h4>
            </div>
        </a>    
        <div id="collapse6" class="panel-collapse collapse">
            <div class="panel-body" id="game-description"></div>
        </div>
    </div>
</div>

Answer 1

您可以通过获取“目标元素”的顶部然后在主体上调用动画来为滚动设置动画。

$('html, body').animate({
    scrollTop: $("#target-element").offset().top
}, 1000);

将其修改为这样的内容将帮助您实现目标

$('.panel-collapse').on('shown.bs.collapse', function (e) {
    var $panel = $(this).closest('.panel');
    $('html,body').animate({
        scrollTop: $panel.offset().top
    }, 500); 
}); 

来源:http://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2/

补充 fiddle :https://jsfiddle.net/hjugdwbp/

---

编辑:2018-05-25

Bootstrap 4 示例

使用 Accordion 示例:https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example 我修改了代码以支持卡片。

$('.collapse').on('shown.bs.collapse', function(e) {
  var $card = $(this).closest('.card');
  $('html,body').animate({
    scrollTop: $card.offset().top
  }, 500);
});

fiddle :https://jsfiddle.net/agpkc4v2/1/

---

编辑:2019-07-18

我让它“更漂亮”了...

Bootstrap 3

https://jsfiddle.net/erutfgvn/

$('.panel-collapse').on('show.bs.collapse', function(e) {
  var $panel = $(this).closest('.panel');
  var $open = $(this).closest('.panel-group').find('.panel-collapse.in');
  
  var additionalOffset = 0;
  if($panel.prevAll().filter($open.closest('.panel')).length !== 0)
  {
        additionalOffset =  $open.height();
  }
  $('html,body').animate({
    scrollTop: $panel.offset().top - additionalOffset
  }, 500);
});

Bootstrap 4

https://jsfiddle.net/9p7f0hut/

$('.collapse').on('show.bs.collapse', function(e) {
  var $card = $(this).closest('.card');
  var $open = $($(this).data('parent')).find('.collapse.show');
  
  var additionalOffset = 0;
  if($card.prevAll().filter($open.closest('.card')).length !== 0)
  {
        additionalOffset =  $open.height();
  }
  $('html,body').animate({
    scrollTop: $card.offset().top - additionalOffset
  }, 500);
});

---

编辑:2021-04-20

Bootstrap 5

https://jsfiddle.net/hLzg0n2y/2/

$('.collapse').on('shown.bs.collapse', function(e) {
  var $card = $(this).closest('.accordion-item');
  var $open = $($(this).data('parent')).find('.collapse.show');
  
  var additionalOffset = 0;
  if($card.prevAll().filter($open.closest('.accordion-item')).length !== 0)
  {
        additionalOffset =  $open.height();
  }
  $('html,body').animate({
    scrollTop: $card.offset().top - additionalOffset
  }, 500);
});