Прокрутіть до об'єкта Аккордеон "Відкритий" (Foundation Framework) - zurb-foundation, аккордеон

Я використовую Фонд ZURB (v6) Аккордеони.

Коли відкривається гармошка, я хочу прокручувати сторінку, щоб вона знаходилася у верхній частині цього елемента аккордея. Я можу запустити цей код:

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

Звичайно, це прокручує сторінку до верху акордеона, а не елемента аккордеона. Як я можу змінити цей код, щоб перейти до елемента акордеона, коли він відкривається?

Відповіді:

3 для відповіді № 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, він спрацьовує після завантаження сторінки (як ініціалізується та відкривається акордеон) і прокручується до елементу гармоніки. Це небажано у моєму випадку, але може бути бажаним у певному випадку.


1 для відповіді № 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>

0 для відповіді № 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();
});

0 для відповіді № 4

Ви можете скористатися сценарієм нижче, я також використовую аккордеон Foundation 6, це також буде працювати, якщо у вас кілька аккордеонів на одній сторінці. Дякую

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

Схожі запитання
Найбільш популярний