it-swarm.com.de

Bootstrap-Akkordeon, bei Klick zum Anfang des aktiven (geöffneten) Akkordeons scrollen?

Ich mache eine responsive Site mit Bootstrap und diese enthält Akkordeons mit einer großen Textmenge. Wenn Sie nach unten lesen und auf das nächste Akkordeon klicken, wird die große Textmenge reduziert und ich bin ganz unten auf der Seite .

Ich habe diesen nützlichen Code von Bootstrap Akkordeon zum oberen Teil der Überschrift des aktiven Bereichs gefunden , aber er scrollt zum Anfang aller Akkordeons, nicht zu dem spezifischen, der geöffnet ist.

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

Wie kann dieser Code so geändert werden, dass er zum aktuell aktiven Akkordeon blättert?

HTML;

  <div class="panel-group custom-padding no-sides" id="accordion">                
                        <div class="panel panel-default">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                                <div class="panel-heading custom-padding">
                                    <h4 class="panel-title text-uppercase">Short synopsis <i class="fa fa-chevron-down pull-right"></i></h4>
                                </div>
                            </a>
                            <div id="collapse1" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <p id="game-deck"></p>
                                </div>
                            </div>
                        </div>                       
                        <div class="panel panel-default">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                                <div class="panel-heading custom-padding">
                                    <h4 class="panel-title text-uppercase">Concepts <i class="fa fa-chevron-down pull-right"></i></h4>
                                </div>
                            </a>
                            <div id="collapse2" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <ul class="whatever" id="game-concepts"></ul>
                                </div>
                            </div>
                        </div>                      
                        <div class="panel panel-default">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                                <div class="panel-heading custom-padding">
                                    <h4 class="panel-title text-uppercase">Themes <i class="fa fa-chevron-down pull-right"></i></h4>
                                </div>
                            </a>    
                            <div id="collapse3" class="panel-collapse collapse">
                                <div class="panel-body" id="game-themes"></div>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
                                <div class="panel-heading custom-padding">
                                    <h4 class="panel-title text-uppercase">Notable locations<i class="fa fa-chevron-down pull-right"></i></h4>
                                </div>
                            </a>    
                            <div id="collapse4" class="panel-collapse collapse">
                                <div class="panel-body" id="game-locations"></div>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">
                                <div class="panel-heading custom-padding">
                                    <h4 class="panel-title text-uppercase">Notable characters<i class="fa fa-chevron-down pull-right"></i></h4>
                                </div>
                            </a>    
                            <div id="collapse5" class="panel-collapse collapse">
                                <div class="panel-body" id="game-characters"></div>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">
                                <div class="panel-heading custom-padding">
                                    <h4 class="panel-title text-uppercase">Full description <i class="fa fa-chevron-down pull-right"></i></h4>
                                </div>
                            </a>    
                            <div id="collapse6" class="panel-collapse collapse">
                                <div class="panel-body" id="game-description"></div>
                            </div>
                        </div>
9
user3574766

Sie können die Bildlaufleiste animieren, indem Sie den oberen Teil des 'Zielelements' aufrufen und dann den Körper animieren.

$('html, body').animate({
    scrollTop: $("#target-element").offset().top
}, 1000);

wenn Sie es so modifizieren, können Sie erreichen, was Sie wollen

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

quelle: http://www.abeautifulsite.net/moothly-scroll-to-an-element-ohne--jjquery-plugin-2/

ergänzende Geige: https://jsfiddle.net/hjugdwbp/


Edit: 2018-05-25

Bootstrap 4 Beispiel

Verwenden des Akkordeon-Beispiels unter: https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example .__ Ich habe den Code geändert, um Karten zu unterstützen.

$('.collapse').on('shown.bs.collapse', function(e) {
  var $card = $(this).closest('.card');
  $('html,body').animate({
    scrollTop: $card.offset().top
  }, 500);
});

Geige: https://jsfiddle.net/agpkc4v2/1/

26
Michael Coxon

Ich arbeite an einem Projekt, das die gleiche Funktionalität benötigt. Kam mit dem folgenden Code auf. Ich habe die Variablen zur Klarstellung hinzugefügt:

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

var panelHeadingHeight = $('.panel-heading').height();
var animationSpeed = 500; // animation speed in milliseconds
var currentScrollbarPosition = $(document).scrollTop();
var topOfPanelContent = $(e.target).offset().top;

if ( currentScrollbarPosition >  topOfPanelContent - panelHeadingHeight) {
    $("html, body").animate({ scrollTop: topOfPanelContent - panelHeadingHeight }, animationSpeed);
}});
0