web-dev-qa-db-fra.com

Bootstrap accordéon faites défiler vers le haut de l'en-tête du panneau actif

Je recherche un code qui défile vers le haut de l'en-tête de panneau actif de mon accordéon bootstrap 3 html/css. La solution la plus proche que j'ai trouvée sur stackoverflow est l'extrait de code js ci-dessous. 

Cet extrait fonctionne assez bien, mais lorsqu'un clic sur un en-tête de panneau est effectué, la page défile de manière à ce que le haut du contenu du panneau s'aligne sur le haut de l'écran. Y a-t-il un moyen de modifier cela pour que l'effet de défilement donne le "titre" du panneau (par opposition au haut de la zone de contenu du panneau) visible en haut de l'écran?

    $(function () {
    $('#accordion').on('shown.bs.collapse', function (e) {
    var offset = $('.panel.panel-default > .panel-collapse.in').offset();
    if(offset)$('html,body').scrollTop(offset.top); }); });

Faites-moi savoir si je devrais également partager l'accordéon bootstrap html.

javascripttwitter-bootstrapscrollaccordion
11
Jb - DoMETRIQ

Je l'ai utilisé et cela fonctionne bien, vous pouvez régler le -20 après le .offset (). Top si vous avez besoin de Tweak up ou down un peu.

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

Ceci vise à cibler l'en-tête .panel spécifique cliqué conformément au commentaire de James Wilson sur la réponse acceptée.

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

Tout ce que j'ai changé de la réponse acceptée de gigelsmith est 'var offset' et la cible du scrollTop.

12
JWPersh

Je ne pouvais pas obtenir la réponse ci-dessus au travail, peut-être me manque-t-il quelque chose mais je ne vois pas comment la ligne scrollTop ci-dessus se rapporte à l'élément accordéon actuellement ouvert, j'ai donc utilisé le code suivant à la place. J'espère que ça aide quelqu'un d'autre:

$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
    var offset = $('.panel.panel-default > .panel-collapse.in').offset();
    if(offset) {
        $('html,body').animate({
            scrollTop: $('.panel-collapse.in').siblings('.panel-heading').offset().top
        }, 500); 
    }
});
});
5
Studio4

Toujours animer semble un peu trop, c'est donc ma version pour ne faire le travail que lorsque l'en-tête se trouve sur la partie visible. (Notez que j'utilise un data-accordion-focus pour appliquer le correctif)

$('[data-accordion-focus]').on('shown.bs.collapse', function (e) {
    var headingTop = $(e.target).prev('.panel-heading').offset().top - 5;
    var visibleTop = $(window).scrollTop();
    if (headingTop < visibleTop) {
        $('html,body').animate({
            scrollTop: headingTop
        }, 500);
    }
});

2
Nico

En utilisant .panel-default comme sélecteur de .on(), vous pouvez faire défiler jusqu'au panneau actif.

$('#accordion').on('shown.bs.collapse', '.panel-default', function (e) {
    $('html,body').animate({
        scrollTop: $(this).offset().top
    }, 500); 
});
0
Xelio