Scroll - On click not able to scroll the custom scroll inside fixed sidebar

Question

I have made a fixed sidebar and applied the custom scrollbar (i.e. m.customscrollbar) but the I want that on click of the anchor tag ( inside the accordion )i want to scroll the accordion at the top of the sidebar and for that I am using the same code which I am using when if the sidebar is not sticky to scroll the body or html to the clicked element top position.

What I am doing wrong?

NON STICKY

Here is the code if the sidebar is not sticky

$('.card > .collapse').on('shown.bs.collapse', function(e){
    e.preventDefault();  
    e.stopPropagation();
  console.log('click');

  var scrollToCategory = $(this).parent().offset().top;


  var body = $("html, body");
  body.stop().animate({scrollTop:scrollToCategory}, 500, 'swing', function() { 
     // alert("Finished animating");
  });

})

STICKY

Here is the code if the sidebar is sticky

$('.card > .collapse').on('shown.bs.collapse', function(e){
    e.preventDefault();  
    e.stopPropagation();
  console.log('click');

  var scrollToCategory = $(this).parent().offset().top;


  var body = $("#sidebar-wrapper");
  body.stop().animate({scrollTop:scrollToCategory}, 500, 'swing', function() { 
     // alert("Finished animating");
  });

})

Here are the jsfiddle Link

Non sticky

Sticky

NOTE: The Sticky example does not seems to work in jsfiddle please copy and paste the example in another custom file:)

Answer 1

Finally,

I made it with after lot of searching. Its just a piece of code already in m.custom scrollbar

Here is the solution:

$('.card > .collapse').on('shown.bs.collapse', function(e){

   e.preventDefault();
   e.stopPropagation();

   var childPos = $(this).parent().offset();
   var parentPos = $('#sidebar').offset();
   var childOffset = {
       top: childPos.top - parentPos.top,
       left: childPos.left - parentPos.left
   }

   $("#sidebar-wrapper").mCustomScrollbar('scrollTo', '-='+childOffset.top);
});