CSS overflow table row positioning

Question

I have table inside a div tab. The table has 40 rows in it and the div's height is set to show 10 rows of that table. CSS's overflow:auto lets me scroll through the 40 rows. All is well there.

How can I, with JavaScript cause the table to programatically position to a given row (i.e., programmatically scroll the table up or down by row)?

Answer 1

Where superHappyFunDiv is the ID of the container DIV and rows is a 0-based row index:

function scrollTo(row)
{
   var container = document.getElementById("superHappyFunDiv");
   var rows = container.getElementsByTagName("tr");

   row = Math.min(Math.max(row, 0), rows.length-1);
   container.scrollTop = rows[row].offsetTop;
}

Will attempt to scroll the requested row to the top of the container. Tested in IE6 and FF3.