Monday, May 20, 2024
Homepage · jquery
 Popular · Latest · Hot · Upcoming
80
rated 0 times [  81] [ 1]  / answers: 1 / hits: 70776  / 8 Years ago, mon, march 14, 2016, 12:00:00

I'm making a responsive site using Bootstrap and it contains accordions with a large amount of text, when you read to the bottom and click the next accordion, the large amount of text is collapsed and I'm left at the bottom of the page.


I found this useful code from Bootstrap accordion scroll to top of active panel heading but it scrolls to the top of all the accordions, not the specific one that is open.


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

        }

    }); 

});

How can this code be modified to scroll to the top of the currently 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>

</div>

More From » jquery
 Answers
5

You can animate the scroll by getting the top of the 'target element' and then calling animate on the body..


$('html, body').animate({

    scrollTop: $("#target-element").offset().top

}, 1000);

modifying it to be something like this will help you achieve what you are after


$('.panel-collapse').on('shown.bs.collapse', function (e) {

    var $panel = $(this).closest('.panel');

    $('html,body').animate({

        scrollTop: $panel.offset().top

    }, 500); 

});

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


complementary fiddle: https://jsfiddle.net/hjugdwbp/



Edit: 2018-05-25


Bootstrap 4 Example


Using the accordion example at: https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example
I have modified the code to support cards.


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



Edit: 2019-07-18


I made it 'prettier'...


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

});


Edit: 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);

});

[#62941] Friday, March 11, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
havenbilliec
Add To Favorites
Follow
Total Points: 324
Total Questions: 106
Total Answers: 94
Location: Pitcairn Islands
Member since Fri, Oct 15, 2021
3 Years ago
havenbilliec questions
Thu, Mar 3, 22, 00:00, 2 Years ago
Fri, Feb 11, 22, 00:00, 2 Years ago
Fri, May 7, 21, 00:00, 3 Years ago
Wed, Apr 7, 21, 00:00, 3 Years ago
Wed, Nov 25, 20, 00:00, 4 Years ago
View All
;