Geek Answers Handbook

Bootstrap accordion, scroll up to the active (open) accordion by clicking?

I make a responsive site using Bootstrap and it contains accordions with lots of text, when you read from below and press the next accordion, a lot of text crashes and I stay at the bottom of the page.

I found this useful code from the Bootstrap Accordion at the top of the title bar of the active panel , but it scrolls at the top of all the accordions, not the one that is open.

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

How can this code be modified to scroll at the top of the active 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>
+12
source share
2 answers

, 'target element' animate .

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

Bootstrap 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

""...

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

, . . :

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

More articles:


All Articles