jquery: use select box to scroll to a certain element (like a named anchor)
<p>I'm attempting to make a select box that when a user selects an option, the page will scroll to the element. Right now I have something similar (with anchor links instead of a select box) and the "scroll to element" is being done with page position (not by scrolling to the element).</p>

<p><strong>So, the main thing I want to accomplish:</strong></p>

<ul>
<li>Let user select an option in a select box and it will ".animate scroll" to an element.</li>
</ul>

<p>Here's an example of what i got so far (click on "browse vendors"):
<a href="http://oneillwebs.com/coburns/vendors/" rel="nofollow">http://oneillwebs.com/coburns/vendors/</a></p>

<p>html:</p>

<pre><code>   &lt;!-- Click links to scroll element --&gt;
   &lt;ul&gt;
     &lt;li&gt;&lt;a href="#" id="A"&gt;A&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#" id="B"&gt;B&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#" id="C"&gt;C&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;


   &lt;!-- Div that holds the information thats scrolled to --&gt;
   &lt;div class="vendor-links"&gt;
      &lt;nav class="a"&gt;
        &lt;h3&gt;A&lt;/h3&gt;
        &lt;ul class="float"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;

      &lt;nav class="b"&gt;
        &lt;h3&gt;B&lt;/h3&gt;
        &lt;ul class="float"&gt;
          &lt;li&gt;&lt;a href="http://www.coburns.com" target="iframe"&gt;Coburn's&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;

      &lt;nav class="c"&gt;
        &lt;h3&gt;C&lt;/h3&gt;
        &lt;ul class="float"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
</code></pre>

<p>jquery:</p>

<pre><code>    // Scroll to element
        $("#A").click(function() {
            $('.vendors-links').animate({ scrollTop:10 }, 1000);
        });

        $("#B").click(function() {
            $('.vendors-links').animate({ scrollTop:200}, 1000);
        });

        $("#C").click(function() {
            $('.vendors-links').animate({ scrollTop:400 }, 1000);
        });
</code></pre>
