How to scroll to specific item using jQuery?

Question

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; }

<div>     <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>     </table> </div>

Answer 1

Dead simple. No plugins needed.

var $container = $('div'),     $scrollTo = $('#row_8');  $container.scrollTop(     $scrollTo.offset().top - $container.offset().top + $container.scrollTop() );  // Or you can animate the scrolling: $container.animate({     scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop() });​ 

Here is a working example.

Documentation for scrollTop.