javascript - Table active row scrolling the scroll bar -

i'm trying make table rows selected when user uses arrow keys. working nice can see below:

example

as can see, table inside div with

overflow:auto.

my issue is: want make scroll bar follows selected row when user reach row under div limit.

here fiddle:

you can try adding scrolltop in highlight function keep highlighted item @ top of list long possible based on tableindex variable , height of row:

$('#areaitens').animate({     scrolltop: $('#data tbody tr:eq('+tableindex+')').height() * tableindex }, 0);

this ensure container showing highlighted item. can play demo here.

Brant