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

Дайте мне знать,если я должен делиться HTML-кодом аккордеона bootstrap.

11
accordion javascript scroll twitter-bootstrap

5 ответов

я использовал это, и он отлично работает, вы можете настроить -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); 
        }
    }); 
});
20

это предназначено для конкретного .заголовок панели щелкнул в соответствии с комментарием Джеймса Уилсона к принятому ответу.

$(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 является ВАР смещения и цель scrollTop по.

12

Я не мог получить ответ выше, чтобы работать, возможно, я чего-то не хватает, но я не вижу, как строка прокрутки выше относится к текущему открытому элементу аккордеона, поэтому вместо этого использовал следующий код. Надеюсь, это поможет кому-то еще:

$(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

Always animate выглядит слишком много, поэтому это моя версия, чтобы выполнять работу только тогда, когда заголовок находится над видимой частью. (обратите внимание, что я использую 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);
    }
});
2

С помощью .panel-default как селектор .on(), вы можете перейти к активной панели.

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