title: Scrolling a DIV to Specific Location
body: <p>There is a plethora of similar questions around but none of them seem to be looking for what I'm looking for, or else none of the answers are useful for my purposes.</p>
  
  <p>The jsfiddle: <a href="http://jsfiddle.net/tumblingpenguin/9yGCf/4/" rel="noreferrer">http://jsfiddle.net/tumblingpenguin/9yGCf/4/</a></p>
  
  <p>The user will select an option and the page will reload with their option applied. What I need is for the "option list" DIV to be scrolled down to the selected option such that it is in the center of the option list.</p>
  
  <p>The HTML...</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;a href="#"&gt;
          &lt;div class="option"&gt;
              Option 1
          &lt;/div&gt;
      &lt;/a&gt;
      &lt;!-- other options --&gt;
      &lt;a href="#"&gt;
          &lt;div class="option selected"&gt; &lt;!-- scroll to here --&gt;
              Option 4
          &lt;/div&gt;
      &lt;!-- other options --&gt;
      &lt;a href="#"&gt;
          &lt;div class="option"&gt;
              Option 7
          &lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The selected option is marked with the <code>selected</code> class. I need to somehow scroll the DIV down to the <code>selected</code> option.</p>
  
  <p>The CSS...</p>
  
  <pre><code>#container {
      background-color: #F00;
      height: 100px;
      overflow-x: hidden;
      overflow-y: scroll;
      width: 200px;
  }
  a {
      color: #FFF;
      text-decoration: none;
  }
  .option {
      background-color: #c0c0c0;
      padding: 5px;
      width: 200px;
  }
  .option:hover {
      background-color: #ccc;
  }
  .selected {
      background-color: #3c6;
  }
  </code></pre>
  
  <p>I've seen this done on other websites so I know it's possible—I just haven't a clue where to begin with it.</p>
  
  <p>P.S. jQuery solutions are acceptable.</p>