Bootstrap 手风琴滚动到活动面板标题的顶部 [英] Bootstrap accordion scroll to top of active panel heading

问题描述

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

I'm looking for a code that scrolls up to the top of the currently active panel heading of my bootstrap 3 html/css accordion. The closest solution I've found on stackoverflow is the snippet of js below.

此代码段运行良好，但当点击面板标题时，页面会滚动，以便面板内容的最顶部与屏幕顶部齐平.有没有办法修改它，以便滚动效果会导致面板标题"(而不是面板内容区域的顶部)在屏幕顶部可见?

This snippet works fairly well, but when a panel heading gets clicked the page scrolls such that the very top of the panel content is flush with the top of the screen. Is there a way to modify this so that the scrolling effect will result in the panel "heading" (as opposed to the top of panel content area) being visible at the top of the screen?

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

Let me know if I should be sharing the bootstrap accordion html as well.

推荐答案

我用过这个，效果很好，如果你需要稍微向上或向下调整它，你可以在 .offset().top 之后调整 -20.

I used this and it works fine you can adjust the -20 after the .offset().top if you need to tweak it up or down a little.

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

这篇关于Bootstrap 手风琴滚动到活动面板标题的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！