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

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

Another way

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

Here is a working example.

Documentation for scrollTop.

Source

Related Posts:

Social Profiles

This web accept cryptocoin donations
BTC address, LTC, ETH, DASH, Uphold:
Why donations?