Material design lite smooth scroll

Question

I am trying to implement a smooth scroll with material design lite. I found this thread which was similar in that it suggested to include 'mdl-layout__content' instead of 'html, body', but it didn't help with the problem. Material Design Lite and jQuery, smooth scroll not working

Here is the link to my code: http://codepen.io/houwat/pen/wzaBza?editors=1010

Here is the code I am trying. When I replace 'mdl-layout__content' with 'html, body', it then gets to the right area, but skips. It does work fine in smaller windows and from the nav drawer.

$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('mdl-layout__content').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    } 
  });
});

Another option I had was this. Works like a charm without Material Design Lite, but it doesn't work at all with it:

   $('a[href^="#"]').click(function(){
    var the_id = $(this).attr("href");

    $('html, body').animate({
        scrollTop:$(the_id).offset().top
    }, 1500, "swing");
    return false;
});

It seems the problem is happening here. The opener and mdl-layout__header--scroll are making the animation buggy. I'd still like to keep the opener class, which will contain the background image...

  <div class="mdl-layout mdl-js-layout mdl-layout--no-desktop-drawer-button">

<header class="opener mdl-layout__header mdl-layout__header--scroll mdl-layout__header--transparent">

Answer 1

 $('mdl-layout__content').animate({

The . before is important. It means that mdl-layout__content is a class. Change that to

$('.mdl-layout__content').animate({