Rolar para Acordeão Item superior uma vez aberto (Foundation Framework) - zurb-foundation, acordeão

Estou a usar Acordeões ZURB Foundation (v6).

Quando um acordeão abre, eu quero rolar a página para estar no topo do item acordeão. Eu posso executar este código:

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

Claro, isso rola a página para o topo do acordeão, não o item do acordeão. Como eu modificaria esse código para rolar para o item do acordeão quando ele é aberto?

Respostas:

3 para resposta № 1

Aqui está a solução que eu achei que funciona. Isso funciona para a versão 6 do 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
});

o setTimeout é usado por causa do slideSpeed do acordeão. Se você não usa setTimeout rola o momento down.zf.accordion dispara, assim, rolando para a posição errada.

Você também pode nos down.zf.accordion no lugar de up.zf.accordion, no entanto, se você usar down.zf.accordion, ele será acionado assim que a página carregar (conforme o acordeão for inicializado e aberto) e rolará para o item do acordeão. Isso é indesejado no meu caso, mas pode ser desejado em certos casos.


1 para resposta № 2

Você pode anexar seus próprios ouvintes de clique a cada acordeão <a> tag e vá até o topo da tag ao clicar. Por exemplo.

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 para resposta № 3

Eu usei pela primeira vez a solução postada por @ L84, então pensei nisso.

No código abaixo, $active faz referência ao item de acordeão atualmente ativo (Nota: a referência é armazenada toda vez que um acordeão é aberto, e não quando o acordeão é clicado). Quando um novo título é clicado, $active é o item que será fechado. Precisamos saber sua altura com antecedência.

Para que o item de acordeão recém-ativado sejacorretamente posicionada, a altura do item anteriormente ativo deve ser subtraída da posição de rolagem da viewport - note que isso é necessário apenas se o item recém-ativo estiver localizado mais abaixo.

$(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 para a resposta № 4

Você poderia usar o script abaixo, eu também estou usando o acordeão da fundação 6, isso funcionará também se você tiver vários acordeões em uma única página. obrigado

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

Perguntas relacionadas