title: How do you scroll a select box to a specific point (using javascript or jQuery)?
body: <p>I want to make the selected option appear in the middle of a drop-down. When I first load the page it appears at the bottom of the drop-down, but if I scroll past it and exit it remembers that when I open it again. I want it to make it appear in the middle by default.</p>
  
  <p>At first I thought I could just use javascript to select an option past the one I want, then set it back to the correct option. I've played with scrollTop and scrollTo, but none of them seem to give me what I need. I've been testing it in Chrome, but it also needs to work in Firefox and IE. Any ideas?</p>
  
  <p>Edit: I tried the scrollTo plugin but it doesn't seem to work for drop-downs. Take a look at these code snippets</p>
  
  <p>From HTML:</p>
  
  <pre><code>&lt;select id="test"&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      // ........
      &lt;option selected="selected"&gt;21&lt;/option&gt;
      &lt;option&gt;22&lt;/option&gt;
      // ........
      &lt;option&gt;40&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>From Javascript:</p>
  
  <pre><code>$(function() {
      alert( $('#test option:selected').next().text() ); // alerts 22
      $().scrollTo('#test'); // scrolls the screen to the drop-down
      $('#test').scrollTo( $('#test option:selected').next() ); //does nothing
  });
  </code></pre>