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.

Simple jQuery code is this:

$(function(){
            $('a.smooth').click(function(){
                console.log("SMOOTH BEGIN");
                var speed = 1000;
                var href= $(this).attr("href");
                var target = $(href == "#" || href == "" ? 'html' : href);
                var position = target.offset().top;
                $("html, body").animate({scrollTop:position}, speed, "swing");
                console.log("SMOOTH END");
            });
        });

And simple html code is this:

<!-- Navigation (this is included header) -->
<nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="">Home</a>
    <a class="mdl-navigation__link smooth" href="#product">Product</a>
</nav>

<!--Main contents -->
<main class="mdl-layout__content">
    <div id="product"><!—-Contents-—></div>
</main>

This code showed me the log, "SMOOTH BEGIN" and "SMOOTH END". However, that link worked as ordinary link, not like smooth. How can I get jQuery working with MDL? Maybe some conflicts are occurring, but console is not showing anything.

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