web-dev-qa-db-ja.com

Bootstrapアコーディオンはアクティブなパネル見出しの一番上までスクロールします

bootstrap 3 html/cssアコーディオンの現在アクティブなパネル見出しの一番上までスクロールするコードを探しています。stackoverflowで見つけた最も近い解決策は、のスニペットです。以下のjs。

このスニペットはかなりうまく機能しますが、パネルの見出しがクリックされると、ページがスクロールして、パネルのコンテンツの最上部が画面の最上部と同じ高さになります。これを変更して、スクロール効果によってパネルの「見出し」（パネルのコンテンツ領域の上部ではなく）が画面の上部に表示されるようにする方法はありますか？

    $(function () {
    $('#accordion').on('shown.bs.collapse', function (e) {
    var offset = $('.panel.panel-default > .panel-collapse.in').offset();
    if(offset)$('html,body').scrollTop(offset.top); }); });

bootstrapアコーディオンhtmlも共有する必要があるかどうか教えてください。

javascripttwitter-bootstrapscrollaccordion
11
Jb - DoMETRIQ

私はこれを使用しましたが、少し上下に微調整する必要がある場合は、.offset（）。topの後に-20を調整できます。

$(function () {
    $('#accordion').on('shown.bs.collapse', function (e) {
        var offset = $('.panel.panel-default > .panel-collapse.in').offset();
        if(offset) {
            $('html,body').animate({
                scrollTop: $('.panel-title a').offset().top -20
            }, 500); 
        }
    }); 
});
21
gigelsmith

これは、受け入れられた回答に対するJames Wilsonのコメントに従って、クリックされた特定の.panel-headingをターゲットにすることです。

$(function () {
    $('#accordion').on('shown.bs.collapse', function (e) {
        var offset = $(this).find('.collapse.in').prev('.panel-heading');
        if(offset) {
            $('html,body').animate({
                scrollTop: $(offset).offset().top -20
            }, 500); 
        }
    }); 
});

Gigelsmithの受け入れられた答えから変更したのは、「varoffset」とscrollTopのターゲットだけです。

12
JWPersh

上記の答えを機能させることができませんでした。何かが足りない可能性がありますが、上記のscrollTop行が現在開いているアコーディオンアイテムとどのように関連しているかがわからないため、代わりに次のコードを使用しました。それが他の誰かに役立つことを願っています：

$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
    var offset = $('.panel.panel-default > .panel-collapse.in').offset();
    if(offset) {
        $('html,body').animate({
            scrollTop: $('.panel-collapse.in').siblings('.panel-heading').offset().top
        }, 500); 
    }
});
});
5
Studio4

常にアニメートは少し多すぎるように見えるので、これは見出しが目に見える部分の上にあるときにのみ仕事をする私のバージョンです。 （修正を適用するためにdata-accordion-focusを使用することに注意してください）

$('[data-accordion-focus]').on('shown.bs.collapse', function (e) {
    var headingTop = $(e.target).prev('.panel-heading').offset().top - 5;
    var visibleTop = $(window).scrollTop();
    if (headingTop < visibleTop) {
        $('html,body').animate({
            scrollTop: headingTop
        }, 500);
    }
});
1
Nico

.on()のセレクターとして.panel-defaultを使用すると、アクティブなパネルまでスクロールできます。

$('#accordion').on('shown.bs.collapse', '.panel-default', function (e) {
    $('html,body').animate({
        scrollTop: $(this).offset().top
    }, 500); 
});
0
Xelio