Scrolle zum Akkordeon-Eintrag Top Once Open (Foundation Framework) - zurb-foundation, akkordeon

Ich benutze ZURB Foundation (v6) Akkordeons.

Wenn sich ein Akkordeon öffnet, möchte ich die Seite scrollen, um an der Spitze dieses Akkordeon-Gegenstandes zu sein. Ich kann diesen Code ausführen:

$("#arf").on("down.zf.accordion", function() {
$("html,body").animate({scrollTop: $(this).offset().top}, "slow");
});

Natürlich scrollt die Seite zur Oberseite des Akkordeons, nicht zum Akkordeongegenstand. Wie würde ich diesen Code ändern, um beim Öffnen des Akkordeons zu scrollen?

Antworten:

3 für die Antwort № 1

Hier ist die Lösung, die ich gefunden habe, die funktioniert. Dies funktioniert für Version 6 von Foundation for Sites.

$("#form-selector").on("up.zf.accordion", function(event) {
setTimeout(function(){
$("html,body").animate({scrollTop: $(".is-active").offset().top}, "slow");
}, 250); //Adjust to match slideSpeed
});

Das setTimeout wird wegen der verwendet slideSpeed des Akkordeons. Wenn Sie nicht verwenden setTimeout es scrollt den Moment down.zf.accordion Brennt so in die falsche Position.

Sie können uns auch down.zf.accordion anstelle von up.zf.accordionwenn Sie jedoch verwenden down.zf.accordionEs wird ausgelöst, sobald die Seite geladen wird (während das Akkordeon initialisiert und geöffnet wird) und scrollt zum Akkordeonelement. Dies ist in meinem Fall unerwünscht, kann aber in bestimmten Fällen erwünscht sein.


1 für die Antwort № 2

Sie können jedem Akkordeon eigene Klick-Listener hinzufügen <a> Markieren und scrollen Sie beim Klicken auf das obere Ende des Tags. Z.B.

JS

$(".accordionBtn").on("click", function(event) {
$("html,body").animate({scrollTop: $(event.target).offset().top}, "slow");
});)

CSS

<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a class="accordionBtn" href="#panel1a">Accordion 1</a>
<div id="panel1a" class="content active">
Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li class="accordion-navigation">
<a class="accordionBtn" href="#panel2a">Accordion 2</a>
<div id="panel2a" class="content">
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li class="accordion-navigation">
<a class="accordionBtn" href="#panel3a">Accordion 3</a>
<div id="panel3a" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
</ul>

0 für die Antwort № 3

Ich habe zuerst die von @ L84 gepostete Lösung verwendet, dann habe ich an diese gedacht.

Im folgenden Code $active Verweist auf das momentan aktive Akkordeon-Objekt (Hinweis: Die Referenz wird jedes Mal gespeichert, wenn ein Akkordeon geöffnet wird und nicht wenn der Akkordeon-Titel angeklickt wird). Wenn ein neuer Titel angeklickt wird, $active ist der Gegenstand, der geschlossen wird. Wir müssen seine Höhe im Voraus wissen.

Für den neu aktiven Akkordeonartikel seinrichtig positioniert, muss die Höhe des zuvor aktiven Objekts von der Scrollposition des Ansichtsfensters abgezogen werden. Beachten Sie, dass dies nur notwendig ist, wenn das neu aktive Objekt weiter unten liegt.

$(function () {
var $active;

$(".accordion").on("click", ".accordion-title", function () {
var itemIndexNew = $(".accordion-item").index($(this).parent());
var itemIndexOld = ($active ? $(".accordion-item").index($active) : null);
if (itemIndexOld !== null && itemIndexOld < itemIndexNew) {
$("html, body").scrollTop($(window).scrollTop() - $active.height());
}
});

$(".accordion").on("down.zf.accordion", function(e) {
$active = $(".accordion").find(".accordion-item.is-active");
});

$(document).foundation();
});

0 für die Antwort № 4

Du könntest das folgende Skript benutzen, ich benutze auch das Akkordeon der Stiftung 6, das funktioniert auch, wenn du mehrere Akkordeons auf einer einzelnen Seite hast. Vielen Dank

jQuery(".accordion-title").click(function() {
var $this = this;
setTimeout(function(){
jQuery("html,body").animate({scrollTop: jQuery($this).closest(".accordion").find(".is-active").offset().top}, "slow");
}, 250);
});

Verwandte Fragen