title: Material Design Lite and jQuery, something is wrong with smooth scroll
body: <p>Yesterday, I asked similar question, <a href="https://stackoverflow.com/questions/32035052/material-design-lite-and-jquery-smooth-scroll-not-working">here</a>.</p>
  
  <p>And smooth scroll has worked.<br>
  However, something is wrong with smooth scroll when I used it.</p>
  
  <p>Code is here ( this repository include 1 html file and 1 image file):<br>
  <a href="https://github.com/MitsuhikoShimomura/mdl-error" rel="nofollow noreferrer">https://github.com/MitsuhikoShimomura/mdl-error</a></p>
  
  <p>Some important parts of the code.<br>
  Smooth Scroll:</p>
  
  <pre><code>&lt;script&gt;
    $(function(){
      $("a.smooth").click(function(e){
              e.preventDefault();
              var speed = 500;
              var href= $(this).attr("href");
              var target = $(href == "#" || href == "" ? 'html' : href);
              var nav_height = $(".mdl-layout__header-row").height();
              var position = target.offset().top - nav_height;
              $(".mdl-layout__content").animate({scrollTop:position}, speed, "swing");
              return false;
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Body contents:</p>
  
  <pre><code>&lt;div class="layout-transparent mdl-layout mdl-js-layout"&gt;
      &lt;header class="mdl-layout__header mdl-layout__header--transparent"&gt;
          &lt;div class="mdl-layout__header-row"&gt;
              &lt;span class="mdl-layout-title"&gt;Sample&lt;/span&gt;
              &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
              &lt;nav class="mdl-navigation"&gt;
                  &lt;a class="mdl-navigation__link smooth" href="#0"&gt;0&lt;/a&gt;
                  &lt;a class="mdl-navigation__link smooth" href="#1"&gt;1&lt;/a&gt;
                  &lt;a class="mdl-navigation__link smooth" href="#2"&gt;2&lt;/a&gt;
                  &lt;a class="mdl-navigation__link smooth" href="#3"&gt;3&lt;/a&gt;
                  &lt;a class="mdl-navigation__link smooth" href="#4"&gt;4&lt;/a&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;!--Main contents --&gt;
      &lt;main class="mdl-layout__content"&gt;
          &lt;ul class="ul-test"&gt;
              &lt;li id="0"&gt;0&lt;/li&gt;
              &lt;li id="1"&gt;1&lt;/li&gt;
              &lt;li id="2"&gt;2&lt;/li&gt;
              &lt;li id="3"&gt;3&lt;/li&gt;
              &lt;li id="4"&gt;4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/main&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Correct Scroll<br>
  ---When smooth scroll starts from "top", scroll works correct.<br>
  ---However if the goal of scroll is "top", scroll works correct.</p>
  
  <ul>
  <li>From "top" to "#1"</li>
  <li>From "top" to "#3"</li>
  <li>From "#2" to "top"</li>
  <li>etc..</li>
  </ul>
  
  <p>Incorrect Scroll<br>
  ---When smooth scroll dose not start from "top", scroll dosen't work correct.<br>
  ---When leaving position and arriving position are same, scroll dosen't work incorrect.</p>
  
  <ul>
  <li>From "#1" to "#2"</li>
  <li>From "#2" to "#4"</li>
  <li>From "#3" to "#3"</li>
  <li>etc..</li>
  </ul>
  
  <p>I have no idea why smooth scroll do not work correct.</p>