アコーディオンへのスクロールアイテムトップ一度開く(Foundation Framework) - zurb-foundation、accordion

私は使用しています ZURB Foundation(v6)アコーディオン.

アコーディオンが開くと、ページをスクロールしてそのアコーディオンアイテムの一番上に移動します。私はこのコードを実行することができます:

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

もちろん、これはアコーデオンの項目ではなくアコーディオンの上部にページをスクロールします。このコードを変更して、アコーディオンのアイテムが開いたときにスクロールする方法はありますか?

回答:

回答№1の場合は3

ここで私が見つけた解決策があります。これは、Foundation for Sitesのバージョン6で機能します。

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

setTimeout のために使用されます slideSpeed アコーデオンのあなたが使用しない場合 setTimeout それは瞬間をスクロールする down.zf.accordion したがって、間違った位置にスクロールします。

あなたも私たちにできる down.zf.accordion 代わりに up.zf.accordionしかし、もしあなたが down.zf.accordionページが読み込まれると(アコーディオンが初期化されて開きます)、アコーディオンアイテムにスクロールします。これは私の場合は望ましくありませんが、特定の場合には望ましいかもしれません。


回答№2の場合は1

それぞれのアコーディオンに独自のクリックリスナーを付けることができます <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>

回答№3の場合は0

私は最初に@ 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();
});

回答№4の場合は0

以下のスクリプトを使用することもできます。また、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);
});

関連する質問
メニュー
最も人気のある