jquerycssscrollfixedmcustomscrollbar

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


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


Solution

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