How to scroll table to particular tr programmatically

Question

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 ?

please provide jsFiddle – Dipali Vasani Apr 04 '14 at 06:41 — Dipali Vasani, Apr 04 '14 at 06:41
I have added all the code related to the functionality . – V-Xtreme Apr 04 '14 at 06:42 — V-Xtreme, Apr 04 '14 at 06:42

score 18 · Answer 1 · edited Jul 07 '16 at 16:51

18

This worked for me, try this

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

edited Jul 07 '16 at 16:51

R. Zagórski

20,020
5
65
90

answered Jul 07 '16 at 15:49

Prashanth vunnam gcs

240
2
8

1

Super simple and works well. Seems almost too good to be true - are there any known drawbacks / lack of support for this method? – elPastor Apr 18 '19 at 13:16
Please go through below link to know more information https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView – Prashanth vunnam gcs Apr 22 '19 at 10:10
Best answer, simple and concise – realmag777 Jul 14 '20 at 13:01
Tried other solutions using jQuery, but this simple one line works perfectly. – Robin Walmsley Aug 12 '20 at 15:30

score 4 · Accepted Answer · edited May 23 '17 at 11:54

4

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

edited May 23 '17 at 11:54

Community

1
1

answered Apr 04 '14 at 06:45

Dipali Vasani

2,526
2
16
30

score 0 · Answer 3 · edited Dec 31 '22 at 09:17

0

Here the simple step for scroll top function

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

Here the Demo

edited Dec 31 '22 at 09:17

Abdul Saleem

10,098
5
45
45

answered Apr 04 '14 at 07:02

Selvamani

7,434
4
32
43

How to scroll table to particular tr programmatically

3 Answers3

Linked