how to Scroll down in a html table using arrowkeys?

Question

Hi,

I'm developing a web application and encountered following problem.

there are two tables in my page and when i select a row in table1 , first row in table2 get selected.I want to scroll down the table2 using arrow keys(without click in any row of table2). But when I use arrow keys, scroll bar doesn't work. It work only after I click a row in table2.

Is there any javascript solution for this?

Answer 1

You may get pressed keys and scroll from javascript. Scrolling solution for jQuery:

$('html, body').animate({scrollTop: 300}, 500);

will scroll to 300px from top by 500ms

Answer 2

You may need to set the focus:

tables2.tabIndex = 1; // allows focus   
table2.focus();