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

Alvistec spanish
Plan Alvistec in Youtube
Privacy policy

This web site uses third's cookies and the Google's cookies to offer services, personalize ads and analyze traffic (Google analytics).
The information on the use of the this web site is shared with Google and another ads provider platforms. When you using this web site, you accept cookies use.
See more about the Cookies

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