title: Side scroll menu with CSS and jQuery
body: <p>I want to create a side scroll menu like <a href="http://www.timotheecottier.fr/" rel="nofollow">here</a>. What I have:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="scroll"&gt;
  &lt;p class="scroll_item" id="1"&gt;&amp;nbsp;&lt;/p&gt;
  &lt;p class="scroll_item" id="2"&gt;&amp;nbsp;&lt;/p&gt;
  &lt;p class="scroll_item" id="3"&gt;&amp;nbsp;&lt;/p&gt;
  &lt;p class="scroll_item" id="4"&gt;&amp;nbsp;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="first"&gt; 1 &lt;/div&gt;
  &lt;div id="second"&gt; 2 &lt;/div&gt;
  &lt;div id="third"&gt; 3 &lt;/div&gt;
  &lt;div id="fourth"&gt; 4 &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>    .scroll{
          position:fixed;
          height:48%;
          right:4px;
          top:48%
      }
  
  
      .scroll_item{
          margin-bottom:10px;
          width:10px;
          height:10px;
          border: 3px solid #FFF;
      }
      .scroll_item_active{
          width:10px;
          height:10px;
          border:3px solid #FFF;
          background-color: #FFF;
          margin-bottom: 10px;
      }
  </code></pre>
  
  <p>How this should work:
  When you click on the <code>&lt;p&gt;</code> with the id 3, it will scroll to the div with the id "third", and the box will have the <code>scroll_item_active</code> class. On the other hand, if you use the browser's scrollbar, the box's class will still be changed. </p>
  
  <p>I need your help to code the jQuery script.
  What I've done:</p>
  
  <pre><code>$('#1').onclick(function(.scrollTo('#first');)
  $('#2').onclick(function(.scrollTo('#second');)
  $('#3').onclick(function(.scrollTo('#third');)
  $('#4').onclick(function(.scrollTo('#fourth');)
  </code></pre>