Букстральный аккордеон прокручивается вверху заголовка активной панели

Я ищу код, который прокручивается вверху текущего активного заголовка панели моего бутстрапа 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); }); });

Сообщите мне, должен ли я также использовать html для бутстрапового аккордеона.

Ответы

Ответ 1

Я использовал это, и он отлично работает, вы можете настроить -20 после .offset(). top, если вам нужно немного подправить его вверх или вниз.

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

Ответ 2

Это нацеливается на конкретный заголовок панели, нажав на комментарий Джеймса Уилсона относительно принятого ответа.

$(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" и target scrollTop.

Ответ 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); 
    }
});
});

Ответ 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);
    }
});

Ответ 5

Используя .panel-default в качестве селектора .on(), вы можете перейти к активной панели.

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

Ответ 6

где и как я должен включить код для этой функции аккордеона?

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

});

Спасибо