title: How to programmatically scroll an HTML element?
body: <p>I am trying to create a web page that has a table of elements that the user can select from. The number of elements could be as small as a single element but also grow as large as about 120. I don't want the table to stretch down the page, so I'm stuffing it into its own <code>&lt;div&gt;</code> tag with a defined height and a vertical scroll bar. A bare-bones example:</p>
  
  <pre><code>&lt;div style="width:100px; height:100px; overflow-y:scroll; overflow-x:hidden;"&gt;
    &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;item 1&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;item 2&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;item 3&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;item 4&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;item 5&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;item 6&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;item 7&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;item 8&lt;/td&gt;&lt;/tr&gt;
      &lt;tr style="color:#00aa00"&gt;&lt;td&gt;item 9&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this example, the table is in a vertically-scrolling area and the active item is the last one in the table. So far so good.</p>
  
  <p><strong>My question is:</strong> When updating this table, how can I set it so that it automatically scrolls to the end? E.g., when the page is created, it's supposed to select element #9 automatically; the UI should already highlight that item in the list and that means automatically setting the scrollbar to the end.</p>
  
  <p>I don't see a way to do it with the <code>&lt;div&gt;</code> tag (though I may be missing something). Do I need to use an <code>&lt;iframe&gt;</code> tag some how? I figure that if each line of the table has an anchor tag, then the scroll position could be set that way. I'm not completely sure how to do that, though, so I thought I would ask.</p>
  
  <p>I know there are probably data table plugins I can use to do this (I was using <a href="http://yuilibrary.com/">YUI</a> previously, and I never figured out if it could solve this particular problem). But this seems simple enough that I don't feel I should need to import any plugin that could easily be used as an entire in-browser spreadsheet.</p>