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

【问题标题】：Bootstrap accordion scroll to top of active panel headingBootstrap 手风琴滚动到活动面板标题的顶部
【发布时间】：2014-03-24 09:56:06
【问题描述】：

我正在寻找一个代码，它可以滚动到我的 bootstrap 3 html/css 手风琴的当前活动面板标题的顶部。我在 stackoverflow 上找到的最接近的解决方案是下面 js 的 sn-p。

这个 sn-p 工作得相当好，但是当一个面板标题被点击时，页面滚动使得面板内容的最顶部与屏幕顶部齐平。有没有办法修改它，以便滚动效果将导致面板“标题”（与面板内容区域的顶部相反）在屏幕顶部可见？

    $(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，请告诉我。

【问题讨论】：

标签： javascript twitter-bootstrap scroll accordion

【解决方案1】：

我用过这个，它工作得很好，如果你需要稍微向上或向下调整，你可以在 .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); 
        }
    }); 
});

【讨论】：

它在动画中表现得有些滑稽，但它仍然有效；）
有没有办法让这个滚动到实际点击的.panel-heading？它目前正在滚动到第一个，在移动设备上不是很好。
@JamesWilson 我在下面回答了如何定位实际点击的 .panel-heading :)
在动画结束后尝试使用鼠标滚动时，是否有人出现冻结/闪烁效果？
无论如何要让这个javascript逻辑适用于任何面板，这样我们就不必在scrollTop类名中硬编码？？？

【解决方案2】：

这是针对根据 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 接受的答案中改变的只是 'var offset' 和 scrollTop 的目标。

【讨论】：

很好的解决方案@JWPersh ！！！！！！我只是按原样复制粘贴它，它工作得很好！！！

【解决方案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); 
    }
});
});

【讨论】：

您的版本正在使用类选择器“.panel-group”而不是 ID 选择器“#accordion”。后者仅在您的 html 中定义了该 ID 时才有效，这不是手风琴的要求。

【解决方案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);
    }
});

【讨论】：

如果您使用的是版本 4，只需将 panel-heading 类替换为 card-header

【解决方案5】：

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

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

【讨论】：