How to animate slimScroll using jQuery

Question

How can I animate this using jQuery? I'm trying to create a smooth scroll-to function when the user clicks the span p1c1. The slimScroll is working, but I'm not sure how to incorporate an animation function into this. Should I try tweening?

$('.p1c1').on("click", function(){
    var fromTop = $('.p2c1').position().top;
    $("#panel2").slimScroll({ scrollTo: fromTop  });
});

This is the type of animation I'm trying to do, but within my slimScroll panel:

$('html, body').animate({
    scrollTop: $(".middle").offset().top
}, 2000);

Here is the slimScroll library: https://github.com/rochal/jQuery-slimScroll/

Answer 1

"Animate: true" does not work.

You have to cut out the "if (isJump)" part in jquery.slimscroll.js and replace it with this:

if (isJump)
      {
        delta = y;
        var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
        offsetTop = Math.min(Math.max(offsetTop, 0), maxTop);
        bar.css({ top: offsetTop + 'px' });
        me.animate(
          { scrollTop: delta + 'px' },
          1200
        );
      }
      if (!isJump){
        me.scrollTop(delta);
      }

Answer 2

I used scroll-behavior: smooth; and worked fine for me.

Answer 3

I was looking for the same thing but couldn't find an existing solution - so I've made a simple fork of rochal's code. You can find it here: https://github.com/edragame/jQuery-slimScroll

The only change I made was to add an animate option, like so:

$("#panel2").slimScroll({ scrollTo: fromTop, animate: true });

Let me know if that helps.