Bootstrap手风琴滚动到活动面板标题的顶部

时间:2014-02-22 18:56:12

标签: javascript twitter-bootstrap scroll accordion

我正在寻找一个代码,该代码可以滚动到我的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,请告诉我。

5 个答案:

答案 0 :(得分:21)

我使用了它并且它可以正常工作,你可以在.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); 
        }
    }); 
});

答案 1 :(得分:12)

这是根据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的目标。

答案 2 :(得分:5)

我无法得到上面的答案,也许我错过了一些东西,但我看不出上面的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); 
    }
});
});

答案 3 :(得分:2)

总是动画看起来有点太多,所以这是我的版本,只有当标题在可见部分上时才能完成工作。 (请注意,我使用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);
    }
});

答案 4 :(得分:0)

使用.panel-default作为.on()的选择器,您可以滚动到活动面板。

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