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

Question

What i am trying to do is, i have a sidebar menu (accordion type) and i am trying to scrolls up to the top of the currently active panel heading of my

<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> 

The problem is when i click on a menu is it moving up and i want to scroll to the top of the menu which is active. i am using the below 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');
});

when i click the menu it is actually going down but not to the top of the active menu. Can you please help me? i found useful reference here here but it is not working as expect.

UPDATED

My jsfiddle: https://jsfiddle.net/37yuL2d9/1/

in my jsfiddle, for example: first click menu "ABC" then When i click the menu "XYZ" it should it should scroll to top of XYZ heading. but it is not working as expected.

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

Just delete the "html " part in the animate method. I tried in your fiddle and works well. Good Luck!