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.