title: Use jQuery to scroll up and down to div id
body: <p>jQuery noob here. I have a fixed nav bar where I have an About div that I want to click on to scroll to the about section of the page. It's halfway working right now. If I am above the about section, clicking on the div will successfully scroll down to the about section, but if I choose to scroll past the about section it will not scroll back up to it if I click on the button. I am unsure about how to get it to scroll back up instead of only being able to go in one direction. </p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;div id="about-button"&gt;About&lt;/div&gt;
    &lt;div id="projects-button"&gt;Projects&lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;section class="about-me"&gt;
    &lt;div class="about" id="about"&gt;
      &lt;div class="about-box"&gt;&lt;h1&gt;About&lt;/h1&gt;&lt;/div&gt;
        &lt;div class="bio-box"&gt;
          &lt;h3&gt;Bio&lt;/h3&gt;
          &lt;p class="bio-text"&gt;Bio text yada yada.&lt;/p&gt;
          &lt;p class="bio-text"&gt;More bio text yada yada&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section class="projects-section"&gt;
    &lt;div class="projects" id="projects"&gt;
       &lt;div class="project-main"&gt;&lt;h1&gt;Projects&lt;/h1&gt;&lt;/div&gt;
         &lt;a class="project-link" href=""&gt;
           &lt;div class="project-picture"&gt;&lt;/div&gt;
         &lt;/a&gt;
       &lt;div class="project-title"&gt;Project Name&lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And this is my jQuery:</p>
  
  <pre><code>function scrollToSection() {
   $("#about-button").click(function() {
      $('html, body').animate({
          scrollTop: $("#about").offset().top
      }, 2000);
   });
  }
  
  </code></pre>