How to scroll to specific item using javascript?

Categories:  Web
Labels:  html, javascript

I have a big table with vertical scroll bar. I would like to scroll to a specific line in this table using jQuery/Javascript. Are there built-in methods to do this?

Here is a little example to play with.

div {
 width: 100px;
 height: 70px;
 border: 1px solid blue;
 overflow: auto;
 <table id="my_table">
 <tr id='row_1'><td>1</td></tr>
 <tr id='row_2'><td>2</td></tr>
 <tr id='row_3'><td>3</td></tr>
 <tr id='row_4'><td>4</td></tr>
 <tr id='row_5'><td>5</td></tr>
 <tr id='row_6'><td>6</td></tr>
 <tr id='row_7'><td>7</td></tr>
 <tr id='row_8'><td>8</td></tr>
 <tr id='row_9'><td>9</td></tr>

Dead simple. No plugins needed.

var container = $('div'),
 scrollTo = $('#row_8');

 scrollTo.offset().top - container.offset().top + container.scrollTop()

// Or you can animate the scrolling:
 scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()

Another way

function onPlayerReady(event) {
  $('html, body').animate({scrollTop: $("#presentation").offset().top}, 3000);;

Here is a working example.

Documentation for scrollTop.


Related Posts: