Material Design Lite and jQuery, smooth scroll not working

Question

I am unable to use .animate method of jQuery with Google\'s Material Design Lite(MDL). I have used MDL to make navigation bar, but smooth scrolling was not working.

Answer 1

The reason you are not seeing anything happen is because you are scrolling on the body node. MDL handles the overflow within the mdl-layout__content, this is the element you should scroll on.

So this -

$("html, body").animate({scrollTop:position}, speed, "swing");

Now becomes-

$(".mdl-layout__content").animate({scrollTop:position}, speed, "swing");

Here's a codepen example - http://codepen.io/mdlhut/pen/BNeoVa