引導側邊欄導航菜單滾動到活動面板標題的頂部

Question

我想要做的是，我有一個側邊欄菜單（手風琴類型），我試圖向上滾動到我的當前活動面板標題的頂部

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

當我單擊菜單時，它實際上正在下降，但沒有到達活動菜單的頂部。 你能幫我么？ 我在這里找到了有用的參考，但它沒有按預期工作。

更新

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

例如，在我的 jsfiddle 中：首先單擊菜單“ABC”，然后當我單擊菜單“XYZ”時，它應該滾動到 XYZ 標題的頂部。 但它沒有按預期工作。

Answer 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”部分即可。 我試過你的小提琴並且效果很好。 祝你好運！