Scrollen zum Inhalt, nachdem ein Bootstrap-Akkordeon geöffnet wurde

Question

Ich habe ein Bootstrap-Akkordeon, das viele Panels enthält. Das Problem, mit dem ich konfrontiert bin, ist, dass wenn das Panel die Seite öffnet, der Benutzer keine Ahnung hat, dass das Panel offen ist und sie runterscrollen können.

Um das zu lösen, wollte ich in der Lage sein, zu dem Inhalt zu scrollen, der jetzt geöffnet ist, damit sie wissen, dass der Inhalt geöffnet ist und sie daran hindert, zu ihm zu scrollen.

Ich habe Probleme, wenn ich versuche, dies zu versuchen. Diese

ist, was meine Funktion wie

sieht

$('.accLink').on('click', function(){ 
    if($(this).parent().next('.panel-collapse').hasClass('in')){ 

    }else{ 
    //This is where the scroll would happen 
    } 
}); 

bisher habe ich versucht ...

$('html, body').animate({ 
    scrollTop: ($(this).parent().next('.panel-collapse')) 
    },500); 

und

$('div').animate({ 
    scrollTop: ($(this).parent().next('.panel-collapse')) 
    },500); 

Ich habe auch so etwas wie dies versucht ..

function scrollToElement(ele) { 
    $(window).scrollTop(ele.offset().top).scrollLeft(ele.offset().left); 
} 

var element = $(this).parent().next('.panel-collapse').attr('id'); 
scrollToElement($('#'+element)); 

aber nichts tun, um die Seite. es sitzt nur da. Jede Hilfe wäre willkommen!

Answer 1

Anstatt einen separaten Klick-Ereignis-Listener verwenden Bootstrap-internen Ereignisrückruf:

$("#accordion").on("shown.bs.collapse", function() { 
    var myEl = $(this).find('.collapse.in'); 

    $('html, body').animate({ 
     scrollTop: $(myEl).offset().top 
    }, 500); 
}); 

Oder, wenn Sie die Überschrift angezeigt werden soll:

$("#accordion").on("shown.bs.collapse", function() { 
    var myEl = $(this).find('.collapse.in').prev('.panel-heading'); 

    $('html, body').animate({ 
     scrollTop: $(myEl).offset().top 
    }, 500); 
});