Прокрутите до пункта Аккордеон Вверх Открыто (Foundation Framework)

Question

Я использую ZURB Foundation (v6) Accordions.

Когда аккордеон открывается, я хочу прокрутить страницу вверху этого аккордеона. Я могу запустить этот код:

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

Конечно, это прокручивает страницу в верхней части аккордеона, а не пункт аккордеона. Как мне изменить этот код, чтобы перейти к элементу аккордеона, когда он открывается?

Answer 1

Вот решение, что я обнаружил, что работает. Это работает для версии 6 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 
}); 

The setTimeout используется из-за slideSpeed аккордеона. Если вы не используете setTimeout, он прокручивает момент, когда down.zf.accordion срабатывает при прокрутке в неправильное положение.

Вы также можете нам down.zf.accordion вместо up.zf.accordion, однако, если вы используете down.zf.accordion, он будет срабатывать один раз при загрузке страницы (как гармошка инициализируется и открывает) и свитки к пункту аккордеона. Это нежелательно в моем случае, но может быть желательно в определенном случае.

Answer 2

Вы можете прикрепить свои собственные прослушиватели кликов к каждому аккордеонному тегу <a> и прокрутить вверх до вершины этого тега при щелчке. Например.

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> 

Answer 3

Я сначала использовал решение, отправленное @ L84, тогда я подумал об этом.

В приведенном ниже коде $active ссылается на активный элемент аккордеона (примечание: ссылка хранится каждый раз, когда аккордеон открывается, а не при нажатии на название аккордеона). При нажатии нового заголовка $active - это элемент, который будет закрыт. Нам нужно заранее знать его высоту.

Для того, чтобы новый активный элемент аккордеона был правильно расположен, высота этого ранее активного элемента должна быть вычтена из положения прокрутки в окне просмотра - обратите внимание, что это необходимо только в том случае, если новый активный элемент расположен дальше.

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