web-dev-qa-db-ja.com

Bootstrapアコーディオン、クリック時にアクティブな（開いている）アコーディオンの一番上までスクロールしますか？

Bootstrapを使用してレスポンシブサイトを作成しています。これには、大量のテキストを含むアコーディオンが含まれており、最後まで読んで次のアコーディオンをクリックすると、大量のテキストが折りたたまれ、ページの下部に残っています。

Bootstrapアコーディオンはアクティブなパネルヘッダーの上部にスクロールする からこの便利なコードを見つけましたが、開いている特定のアコーディオンではなく、すべてのアコーディオンの上部にスクロールします。

$(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); 
            }
        }); 
    });

現在アクティブなアコーディオンの一番上までスクロールするようにこのコードを変更するにはどうすればよいですか？

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>
javascriptjquerytwitter-bootstrapaccordion
15
user3574766

「ターゲット要素」の上部を取得し、本体でアニメーションを呼び出すことにより、スクロールをアニメーション化できます。

$('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/

補完フィドル： https://jsfiddle.net/hjugdwbp/

編集：2018-05-25

ブートストラップ4の例

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

フィドル： https://jsfiddle.net/agpkc4v2/1/

編集：2019-07-18

私はそれを「きれいに」しました...

ブートストラップ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);
});

ブートストラップ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);
});
35
Michael Coxon

私は同じ機能を必要とするプロジェクトに取り組んでいます。次のコードを見つけました。明確化のために変数を追加しました：

$('#accordion').on('shown.bs.collapse', function (e) {

var panelHeadingHeight = $('.panel-heading').height();
var animationSpeed = 500; // animation speed in milliseconds
var currentScrollbarPosition = $(document).scrollTop();
var topOfPanelContent = $(e.target).offset().top;

if ( currentScrollbarPosition >  topOfPanelContent - panelHeadingHeight) {
    $("html, body").animate({ scrollTop: topOfPanelContent - panelHeadingHeight }, animationSpeed);
}});
0
Jerome Fitzpatrick