how do i vertical scroll to an element using a nice animation effect with jquery?
<p>How do i vertical scroll to an element using a nice animation effect with jquery?</p>

<p>i have an alphabet menu like this:</p>

<pre><code>&lt;ul id="alphabet"&gt;
   &lt;li&gt;&lt;a href="#A"&gt;A&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#B"&gt;B&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#C"&gt;C&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#D"&gt;D&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#E"&gt;E&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>i have another list with a min-height of 1000px and overflow:auto</p>

<pre><code>&lt;ul id="list"&gt;
&lt;li id="A"&gt;...&lt;/li&gt;
&lt;li id="B"&gt;...&lt;/li&gt;
&lt;li id="C"&gt;...&lt;/li&gt;
&lt;li id="D"&gt;...&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>by the way, the sample list above looks short, but the real one is very large....</p>

<p>if i click on the first list, let's say C, i then want to go to the li in the second list  with an id of C, using an animated effect... if a click A on the first list, then i want to go to A in the second list... and so on... In other words, i will be going up and down the second list</p>

<p>this is so far my code in jquery</p>

<pre><code>// goto item in list
$('#alphabet a').click(function(e) {
   var clicked = $(this).attr('href').slice(1);

   //goto element in list using a nice animation effect

   $('ul#list').animate({
    ????
   }, 400);
});
</code></pre>

<p>i need help finishing my code in jquery</p>

<p>Thanks in advance</p>
