Bootstrap手風琴滾動到活動面板標題的頂部

Question

我正在尋找一個代碼，該代碼可以滾動到我的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，請告訴我。

Answer 1

我使用了它並且它工作正常你可以在.offset（）之后調整-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); 
        }
    }); 
});

Answer 2

這是根據James Wilson對已接受答案的評論來定位特定的.panel標題。

$(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接受的答案中改變的是'var offset'和scrollTop的目標。

Answer 3

我無法得到上面的答案，也許我錯過了一些東西，但我看不出上面的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); 
    }
});
});

Answer 4

總是動畫看起來有點太多，所以這是我的版本，只有在標題超過可見部分時才能完成工作。 （請注意，我使用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); } }); 

Answer 5

通過使用.panel-default作為.on()選擇器，您可以滾動到活動面板。

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