title: Javascript scroll to element with animation onclick
body: <p>I'm just starting out with JS and struggling. I got this lovely bit of code from Adam Khoury and it's working beautifully animated scrolling down the page to the target element.</p>
  
  <p>The <code>ul</code> is within a fixed position navigation bar.</p>
  
  <p>My question is: what code would be needed to make the animation scroll both up and down when the anchor in the <code>nav</code> is clicked?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var scrollY = 0;
  var distance = 10;
  var speed = 24;
  
  function autoScrollTo(el) {
    var currentY = window.pageYOffset;
    var targetY = document.getElementById(el).offsetTop;
    var bodyHeight = document.body.offsetHeight;
    var yPos = currentY + window.innerHeight;
    var animator = setTimeout('autoScrollTo(\'' + el + '\')', 24);
    if (yPos &gt; bodyHeight) {
      clearTimeout(animator);
    } else {
      if (currentY &lt; targetY - distance) {
        scrollY = currentY + distance;
        window.scroll(0, scrollY);
      } else {
        clearTimeout(animator);
      }
    }
  }
  
  function resetScroller(el) {
    var currentY = window.pageYOffset;
    var targetY = document.getElementById(el).offsetTop;
    var animator = setTimeout('resetScroller(\'' + el + '\')', speed);
    if (currentY &gt; targetY) {
      scrollY = currentY - distance;
      window.scroll(0, scrollY);
    } else {
      clearTimeout(animator);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="main-nav"&gt;
    &lt;li&gt;&lt;a href="#" onclick="return false;" onmousedown="autoScrollTo('about');"&gt;
        About&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#" onclick="return false;" onmousedown="autoScrollTo('testimonials');"&gt;
        Testimonials&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#" onclick="return false;" onmousedown="autoScrollTo('contact');"&gt;
        Contact&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;hr style="margin: 25em 0;" /&gt;
  
  &lt;div id="about" class="navButton"&gt;
    &lt;p&gt;About lorem ipsom....&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="testimonials" class="navButton"&gt;
    &lt;p&gt;Testimonial lorem ipsom....&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="contact" class="navButton"&gt;
    &lt;p&gt;Contact lorem ipsum&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>