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

Question

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

这段代码片段工作得相当不错，但当面板标题被点击时，页面会滚动到面板内容的顶部与屏幕顶部齐平的位置。有没有办法修改这个效果，使得滚动效果可让"面板标题"（而不是面板内容区域的顶部）处于屏幕顶部可见？

```javascript $('body').on('click', '.panel-heading a', function() { if ($(this).parents('.panel').find('.panel-collapse').hasClass('in')) { $('html, body').animate({ scrollTop: $(this).offset().top-50 }, 500); } }); ```

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

- Jb - DoMETRIQ

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

- gigelsmith

---

它在动画方面有些滑稽，但仍然能够正常工作 ;) - Michael Brennt

有没有办法使其滚动到实际点击的.panel-heading？目前它正在滚动到第一个，对移动设备不太友好。 - James Wilson

@JamesWilson 我已在下面回答了如何定位实际点击的.panel-heading :) - JWPersh

在动画结束后使用鼠标滚动时，是否有人遇到过冻结/闪烁的问题？ - Deepak Yadav

有没有办法使这个 JavaScript 逻辑适用于任何面板，以便我们不必硬编码 scrollTop 类名？ - klewis

@gigelsmith，我可以确认你的代码在Bootstrap 4中可以运行，但在BS5中会出现问题。如果你能提供任何更新，我们将不胜感激。 - JDW

Answer 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

---

太棒了，@JWPersh 的解决方案！！！我直接复制粘贴它，完美地运行了！！！ - FDavidov

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

- BrochanGuMor

---

你的版本使用了类选择器'.panel-group'，而不是ID选择器'#accordion'。后者仅在HTML中定义了该ID时才有效，而这并不是手风琴所必需的。 - jwepurchase

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

- Nico

---

如果您正在使用版本4，只需将panel-heading类替换为card-header。 - marcelo2605

Answer 5

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

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

- Xelio