引导侧边栏导航菜单滚动到活动面板标题的顶部

Posted 2023-05-08

【中文标题】引导侧边栏导航菜单滚动到活动面板标题的顶部

【英文标题】：bootstrap sidebar nav menu scroll to top of active panel heading

【发布时间】：2021-08-16 11:51:58

【问题描述】：

我想要做的是，我有一个侧边栏菜单（手风琴类型），我试图向上滚动到我的当前活动面板标题的顶部

<ul class="nav flex-column flex-nowrap overflow-hidden gph-group">
<li class="slm-panel nav-item">
    <a class="nav-link collapsed"  data-toggle="collapse" data-target="#sub1">
    <span>
    Agriculture Diggers                                      
    </span></a>
    <div class="gph-panel collapse" id="sub1" aria-expanded="false">
    <ul class="flex-column pl-2 nav">
            <li class="nav-item">
                <a class="nav-link py-0" href="">
                    <span>sub 1</span>
                </a>
            </li>
    </ul> 
</li>                                   
<li class="slm-panel nav-item">
    <a class="nav-link text-truncate" href="">
        <span>
        ABC                                              
        </span>
    </a>
</li>
<li class="slm-panel nav-item">
    <a class="nav-link text-truncate" href="">
        <span>
        DEF                                              
        </span>
    </a>
</li> 

问题是，当我单击菜单时，它是否向上移动，我想滚动到处于活动状态的菜单顶部。我正在使用下面的js

$('.gph-panel').on('show.bs.collapse', function (e) 
    var $panel = $(this).closest('.slm-panel');
    console.log($panel.offset());
     $('html,body').animate(
            scrollTop: $panel.offset().top - 20
      , 500);
    $('.gph-group .in').collapse('hide');
);

当我单击菜单时，它实际上正在下降，但没有到达活动菜单的顶部。你能帮我么 ？我在这里找到了有用的参考 here 但它没有按预期工作。

更新

我的 jsfiddle：https://jsfiddle.net/37yuL2d9/1/

在我的 jsfiddle 中，例如：首先单击菜单“ABC”，然后当我单击菜单“XYZ”时，它应该滚动到 XYZ 标题的顶部。但它没有按预期工作。

【问题讨论】：

再试一次。它工作正常。关键是不给html动画。你会为我投票吗？

【参考方案1】：

$('.gph-panel').on('show.bs.collapse', function (e) 
    var $panel = $(this).closest('.slm-panel');
    console.log($panel.offset());
     $('body').animate(                 // html is deleted
            scrollTop: $panel.offset().top - 20
      , 500);
    $('.gph-group .in').collapse('hide');
);

只需删除 animate 方法中的“html”部分即可。我试过你的小提琴并且效果很好。 祝你好运！

【讨论】：

嗨@Nikita，我确实支持你的回答。最后一次验证，请您点击“ABC”、“XYZ”和“CCC”。你可以看到这个问题。 :)