感谢戴夫转向我从JavaScript路程，到JQuery的。
code的这一点确实是福利局友好。你并不需要在所有编辑它，只需将其粘贴到您的index.html和Bam！和它的作品

 ＆LT;头类=主标题＆GT;                ＆LT; UL类=主导航＆GT;
                ＆LT;立GT;＆LT; A HREF =＃关于＆gt;关于＆LT; / A＆GT;＆LT; /李＆GT;
                ＆LT;立GT;＆LT; A HREF =＃感言＆GT;谈＆LT; / A＆GT;＆LT; /李＆GT;
                ＆LT;立GT;＆LT; A HREF =＃接触＆GT;联系与LT; / A＆GT;＆LT; /李＆GT;
                ＆LT; / UL＆GT;
        ＆LT; /头＆GT;＆LT;！ - 平滑滚动 - ＆GT;
        ＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js＆GT;＆下; /脚本＆GT;
        ＆LT;脚本＆GT;
        $（函数（）{
          $（'一[HREF * =＃]：不使用（HREF =＃]）'）。点击（函数（）{
            如果（location.pathname.replace（/ ^ \\ //，''）== this.pathname.replace（/ ^ \\ //，''）及与放大器; location.hostname == this.hostname）{
              VAR的目标= $（this.hash）;
              目标= target.length？目标：$（'[NAME ='+ this.hash.slice（1）+']'）;
              如果（target.length）{
                $（'HTML，身体）。动画（{
                  scrollTop的：target.offset（）顶部
                }，1000）;
                返回false;
              }
            }
          }）;
        }）;
        ＆LT; / SCRIPT＆GT;
        ＆LT;！ - 平滑滚动结束 - ＆GT;
 

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.

The ul is within a fixed position navigation bar.

My question is: what code would be needed to make the animation scroll both up and down when the anchor in the nav is clicked?

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 > bodyHeight) {
    clearTimeout(animator);
  } else {
    if (currentY < 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 > targetY) {
    scrollY = currentY - distance;
    window.scroll(0, scrollY);
  } else {
    clearTimeout(animator);
  }
}

<ul class="main-nav">
  <li><a href="#" onclick="return false;" onmousedown="autoScrollTo('about');">
      About</a>
  </li>
  <li><a href="#" onclick="return false;" onmousedown="autoScrollTo('testimonials');">
      Testimonials</a>
  </li>
  <li><a href="#" onclick="return false;" onmousedown="autoScrollTo('contact');">
      Contact</a>
  </li>
</ul>

<hr style="margin: 25em 0;" />

<div id="about" class="navButton">
  <p>About lorem ipsom....</p>
</div>

<div id="testimonials" class="navButton">
  <p>Testimonial lorem ipsom....</p>
</div>

<div id="contact" class="navButton">
  <p>Contact lorem ipsum</p>
</div>

Thanks to Dave for steering me away from javascript and on to JQuery. This bit of code is really newb friendly. You don't need to edit it at all, just paste it in your index.html and bam! and it works

<header class="main-header">

                <ul class="main-nav">
                <li><a href="#about">About</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#contact">Contact</a></li>
                </ul>
        </header>    

<!-- SMOOTH SCROLL -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
        $(function() {
          $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
              var target = $(this.hash);
              target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
              if (target.length) {
                $('html,body').animate({
                  scrollTop: target.offset().top
                }, 1000);
                return false;
              }
            }
          });
        });
        </script>
        <!-- End of SMOOTH SCROLL -->