Matthew Cox Matthew Cox - 1 year ago 87
Javascript Question

How do you make a table row scroll into view when the table is in a scrollable div with jquery?

With a div that scrolls:

<div id="PVwindow" style="overflow: scroll; max-width:800px; max-height:230px; float:left;">

how do I get a row to be scrolled into view like:

<table id="PVtable"><tbody><tr>.....</tr>.....<tr id="scrollToViewP" style="background-color: #FFFF99;"><td>xxxx</td></tr></tbody></table>

Here is the non-working code (it scrolls but out of view):

$( document ).ready(function() {
if ($("#scrollToViewP:not(:visible)")) {
scrollTop: $("#scrollToViewP").offset().top
}, 1000);

Here is a jsfiddle working example that scrolls to the bottom

Answer Source

Here is a solution that works most of the time (Like 80%), sometimes it scrolls the whole window as well as the div.

$( document ).ready(function() {

    var element = document.getElementById("scrollToViewP");
    element.scrollIntoView({block: "end", behavior: "smooth"});


I'm still hopeful someone will come along and improve this. (Works in FireFox and IE 11)