Bootstrap accordéon faire défiler vers le haut du panneau actif de la rubrique

Je suis à la recherche d'un code qui permet de faire défiler vers le haut dans le panneau de rubrique de mon bootstrap 3 html/css de l'accordéon. Le plus proche de la solution que j'ai trouvé sur stackoverflow est l'extrait de js ci-dessous.

Cet extrait fonctionne assez bien, mais quand un panneau de tête obtient cliqué sur la page défile tels que le très haut du panneau de contenu est aligné avec le haut de l'écran. Est-il un moyen de modifier cela pour que l'effet de défilement sera le résultat dans le panneau "rubrique" (par opposition à la partie supérieure du panneau zone de contenu) étant 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); }); });

Laissez-moi savoir si je dois être le partage de l'amorçage de l'accordéon html.

OriginalL'auteur Jb - DoMETRIQ | 2014-02-22

  1. 21

    Je l'utilise et il fonctionne très bien, vous pouvez régler l'-20 après la .offset().top si vous avez besoin d'ajuster vers le haut ou vers le bas 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); 
        }
    }); 
});
    Il agit en quelque sorte de drôle avec de l'animation, mais il est encore à travailler 😉
    Est-il de toute façon à faire de ce faites défiler jusqu'à l' .panneau-titre effectivement cliqué? Il est actuellement de défilement pour le premier, pas beaucoup sur un appareil mobile.
    J'ai répondu ci-dessous sur la façon de cibler les réels .panneau-titre cliqué 🙂
    quelqu'un a de congélation/effet scintillant lorsque vous essayez de faire défiler à l'aide de la souris une fois l'animation terminée?
    De toute façon pour faire de cette logique javascript travailler pour n'importe quel panneau, de sorte que nous n'avons pas de code en dur dans un scrollTop nom de la classe???

    OriginalL'auteur gigelsmith

  2. 12

    C'est-à-cibles spécifiques .panneau-titre cliqué comme par James Wilson sur la accepté de répondre.

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

    Tous, j'ai changé de gigelsmith est accepté réponse est "var offset" et le scrollTop cible.

    Excellente solution @JWPersh!!!!! Je viens de copier-collé COMME ça et ça fonctionne parfaitement!!!
    Tout simplement parfait...

    OriginalL'auteur JWPersh

  3. 5

    Je ne pouvais pas obtenir la réponse ci-dessus pour travailler, je suis peut-être raté quelque chose mais je ne vois pas comment le scrollTop ligne ci-dessus est actuellement ouverts accordéon élément donc utilisé le code suivant à la place. Espérons que cela 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); 
    }
});
});
    Votre version est à l'aide du sélecteur de classe '.panneau-groupe " à la place du sélecteur d'ID '#accordéon'. Ce dernier ne fonctionnera que si cet ID est défini dans votre code html, ce qui n'est pas une exigence pour l'accordéon.

    OriginalL'auteur Studio4

  4. 0

    En utilisant .panel-default en tant que sélecteur de .on(), vous pouvez faire défiler le panneau actif.

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

    OriginalL'auteur Xelio