title: animate and scroll div to the top using jquery
body: <p>Here I have created four div's red,blue,green and yellow and a nav menu linking to the respective div's. 
  When I click the link on the nav I want the respective div to animate and scroll to the top.</p>
  
  <p>I am new to jQuery so it's really difficult for me to figure out the solution.
  Any assistance you can provide would be greatly appreciated.</p>
  
  <p>Below is the HTML, CSS and jquery.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;
        &lt;div id="mainContent"&gt;
          &lt;div id="redPage" class="red"&gt;
            &lt;p&gt;Red&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="bluePage" class="blue"&gt;
            &lt;p&gt;blue&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="greenPage" class="green"&gt;
            &lt;p&gt;green&lt;/p&gt;
          &lt;/div&gt;
          &lt;div  id="yellowPage" class="yellow"&gt;
            &lt;p&gt;yellow&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;nav&gt;
          &lt;ul&gt;
            &lt;a href="#redPage"&gt;
            &lt;li class="red"&gt;Red&lt;/li&gt;
            &lt;/a&gt; 
  
            &lt;a href="#bluePage"&gt;
            &lt;li class="blue"&gt;Blue&lt;/li&gt;
            &lt;/a&gt; 
  
            &lt;a href="#greenPage"&gt;
            &lt;li class="green"&gt;Green&lt;/li&gt;
            &lt;/a&gt;
  
            &lt;a href="#yellowPage"&gt;
            &lt;li class="yellow"&gt;Yellow&lt;/li&gt;
            &lt;/a&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>* {
  padding: 0px;
  margin: 0px;
  text-decoration: none;
  }
  body {
  overflow: hidden;
  }
  #wrapper {
  width: 960px;
  height: 500px;
  margin: 20px auto;
  }
  #mainContent {
  float: right;
  width: 800px;
  height: 500px;
  overflow: hidden;
  }
  #redPage {
  width: 800px;
  height: 500px;
  overflow-y: scroll;
  }
  #bluePage {
  width: 800px;
  height: 500px;
  overflow-y: scroll;
  }
  #greenPage {
  width: 800px;
  height: 500px;
  overflow-y: scroll;
  }
  #yellowPage {
  width: 800px;
  height: 500px;
  overflow-y: scroll;
  }
  nav {
  float: left;
  width: 160px;
  }
  nav li {
  list-style-type: none;
  display: block;
  width: 100px;
  height: 50px;
  margin: 30px 0px 0px 0px;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  padding-top: 10px;
  padding-left: 10px;
  font-size: 24px;
  line-height: 30px;
  color: white;
  }
  .red {
  background: red;
  }
  .blue {
  background: blue;
  }
  .green {
  background: green;
  }
  .yellow {
  background: yellow;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code> &lt;script&gt;
            $('document').ready(function() {
                $('a[href^="#"]').click(function(){
                    var $target=$(this.hash);
                    if($target.length==0) $target=$('a[name=" '+this.hash.substr(1)+' "]');
                    if($target.length==0) $target=$('#mainContent');
  
                    $("#mainContent").animate({scrollTop:$target.position().top},900);
                    return false;
  
  
                });
  
            }); 
  
  
   &lt;/script&gt;
  </code></pre>