Setting a scrollbar position

Question

I have a table inside of a div (it's overflow, so the browser renders a scrollbar). Using JavaScript, how do I move the scrollbar handle along the track to a position that corresponds to the location of a row in the table?

+--------------------------------------+ |100                               |   | |101                               |   | |102                               |   | |103                               |   | |104                               |   | |105     This is a table that      |---| |106        has overflowed.        | - |  <-- I want to move this using JavaScript, |107                               |---|      so that a specific row # is visible. |108                               |   | |109                               |   | |110                               |   | |111                               |   | +--------------------------------------+ 

Answer 1

If you want to go the non-jQuery way, use the containing table's scrollTop property.

Lets assume you can easily identify the row you want to scroll to using an ID, along with the containing <div />. Use the offsetTop of the element you want to scroll to.

var container = document.getElementById('myContainingDiv'); var rowToScrollTo = document.getElementById('myRow');  container.scrollTop = rowToScrollTo.offsetTop; 

Answer 2

You can use this:

$('a').on('click', function(e){   var t = this.id.substring(1);   e.preventDefault();   var target= $(".section")[t] ;   var offset = $( target ).offset();   $('html, body').stop().animate({     scrollTop: offset.top   }, 1000); }); 

Also, you could check this example on jsfiddle .