Question

20

Bootstrap accordion scroll to top of active panel heading

rated 0 times [ 22] [ 2] / answers: 1 / hits: 29134 / 10 Years ago, sat, february 22, 2014, 12:00:00

I'm looking for a code that scrolls up to the top of the currently active panel heading of my bootstrap 3 html/css accordion. The closest solution I've found on stackoverflow is the snippet of js below.

This snippet works fairly well, but when a panel heading gets clicked the page scrolls such that the very top of the panel content is flush with the top of the screen. Is there a way to modify this so that the scrolling effect will result in the panel heading (as opposed to the top of panel content area) being visible at the top of the screen?

    $(function () {

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

    var offset = $('.panel.panel-default > .panel-collapse.in').offset();

    if(offset)$('html,body').scrollTop(offset.top); }); });

Let me know if I should be sharing the bootstrap accordion html as well.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckenna

Add To Favorites

Follow

Total Points: 445

Total Questions: 109

Total Answers: 109

Location: Virgin Islands (U.S.)

Member since Sun, May 16, 2021

3 Years ago

mckenna questions

1 Laravel Livewire: Component in Foreach loop. Button Click shows on all items instead of Single item

Mon, Sep 6, 21, 00:00, 3 Years ago

1 Jest mock aws-sdk ReferenceError: Cannot access before initialization

Sat, Apr 11, 20, 00:00, 4 Years ago

1 Nest js POST Request Not Recognizing DTO method

Fri, Mar 20, 20, 00:00, 4 Years ago

1 How to use prop inside another prop as default value in vuejs

Thu, Mar 28, 19, 00:00, 5 Years ago

1 Javascript: Bind/unbind function behavior

Tue, Nov 27, 18, 00:00, 6 Years ago

View All

answered 10 Years ago malaysias · Accepted Answer

I used this and it works fine you can adjust the -20 after the .offset().top if you need to tweak it up or down a little.

$(function () {

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

        var offset = $('.panel.panel-default > .panel-collapse.in').offset();

        if(offset) {

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

                scrollTop: $('.panel-title a').offset().top -20

            }, 500); 

        }

    }); 

});