Bootstrap accordion scroll to top of active panel heading Bootstrap accordion scroll to top of active panel heading
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.
jQuery
twitter-bootstrap
- asked 7 years ago
- G John
2Answer
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);
}
});
});
- answered 7 years ago
- Community wiki
This is to target the specific .panel-heading
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $(this).find('.collapse.in').prev('.panel-heading');
if(offset) {
$('html,body').animate({
scrollTop: $(offset).offset().top -20
}, 500);
}
});
});
All I changed from gigelsmith's accepted answer is 'var offset' and the scrollTop's target.
- answered 7 years ago
- Community wiki
Your Answer