How to animate slimScroll using jQuery

Question

How can I animate this with jQuery? I am trying to create a smooth scroll function when the user clicks on span p1c1 . SlimScroll works, but I'm not sure how to include an animation function in it. Should I try the animation?

 $('.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 in my panel slimScroll:

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

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

Answer 1

I searched the same, but could not find an existing solution, so I created a simple rochal code fork. You can find it here: https://github.com/edragame/jQuery-slimScroll

The only change I made was to add an animation parameter, for example:

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

Let me know if this helps.

Answer 2

Animation: True does not work.

You should cut out the "if (isJump)" part in jquery.slimscroll.js and replace it like 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 3

I am facing the same problem, but after placing the if (isJump) code I get a Uncaught reference error syntax error: delta not defined