I want to scroll the html table to particular tr by using Javascript or jquery. Currently I can get the offset of the selected tr .And I am using the scrollTop method .I have tried the following but it is not working for me :

var table  = document.getElementById("table");
var tr = table.getElementsByTagName("tr")[3];
var scrollTo = tr.offsetTop;
table.scrollTop = scrollTo;

also I tried with jquery :

$('#table').animate({scrollTop:0},50);

can anybody help me where am I getting wrong ?

I want to scroll the html table to particular tr by using Javascript or jquery. Currently I can get the offset of the selected tr .And I am using the scrollTop method .I have tried the following but it is not working for me :

var table  = document.getElementById("table");
var tr = table.getElementsByTagName("tr")[3];
var scrollTo = tr.offsetTop;
table.scrollTop = scrollTo;

also I tried with jquery :

$('#table').animate({scrollTop:0},50);

can anybody help me where am I getting wrong ?

• javascript
• jquery
• html

• please provide jsFiddle – Dipali Vasani Commented Apr 4, 2014 at 6:41
• I have added all the code related to the functionality . – V-Xtreme Commented Apr 4, 2014 at 6:42

3 Answers 3

This worked for me, try this

var elm = document.getElementById(id);
elm.scrollIntoView(true);

try this : http://jsfiddle.net/SZKJh/

var w = $(window);
var row = $('#tableid').find('tr').eq( line );

if (row.length){
    w.scrollTop( row.offset().top - (w.height()/2) );
}

reference :

https://stackoverflow.com/a/7853216/1982680

Here the simple step for scroll top function

 var s = $("table tbody > tr:nth-child(20)").position();
 $( "div" ).scrollTop( s.top );

Here the Demo