jQuery scrollTo Table Row

Scrolls to table row on clicking links. This example does not use jQuery 3rd party plugins, default functions only.

by ckmuc

HTML

<div class="posts" style="height: 224px; width:100%; overflow:scroll;" >
        <table class="price" id="price" cellpadding="10px" border="1">
          <tr>
            <th>Entry Header 1</th>
            <th>Entry Header 2</th>
            <th>Entry Header 3</th>
            <th>Entry Header 4</th>
          </tr>
          <tr>
            <td>Entry First Line 1</td>
            <td>Entry First Line 2</td>
            <td>Entry First Line 3</td>
            <td>Entry First Line 4</td>
          </tr>
          <tr>
            <td>Entry Line 1</td>
            <td>Entry Line 2</td>
            <td>Entry Line 3</td>
            <td>Entry Line 4</td>
          </tr>
          <tr>
            <td>Entry Last Line 1</td>
            <td>Entry Last Line 2</td>
            <td>Entry Last Line 3</td>
            <td>Entry Last Line 4</td>
          </tr>
          <tr>
            <td>Entry Last Line 5</td>
            <td>Entry Last Line 6</td>
            <td>Entry Last Line 7</td>
            <td>Entry Last Line 8</td>
          </tr>
          <tr>
            <td>Entry Last Line 9</td>
            <td>Entry Last Line 10</td>
            <td>Entry Last Line 11</td>
            <td>Entry Last Line 12</td>
            
          </tr>
        </table>
</div>
<div class="pages"></div>

CSS

.posts {
    text-align:center;
}
.price {
    border: 1px solid #efefef;
}
.price th {
    background: #555;
    color: #fff;
}

JavaScript

$(document).ready(function(){
    // Count rows
    var length = $('tr', $('.price')).not('tr:first').length;
    // Build links to rows from row 1 (to ignore table header)
    for( i=1; i <= length; i++ ) {
        $('.pages').append('<a class="linkrow" href="'+i+'">Row '+i+'</a> | ');
    }
    // On click
    $('a.linkrow').on('click',function(e){
        // Prevent default
        e.preventDefault();
        // Get row index from link href
        var rowId = $(this).attr('href');
        // Get row position by index
        var ypos = $('.price tr:eq('+rowId+')').offset().top;
        // Go to row
        $('.posts').animate({
            scrollTop: $('.posts').scrollTop()+ypos
        }, 500);
        // Some CSS to visualize which row is being viewed
        $('.price tr').css({'background-color': 'none'});
        $('.price tr:eq('+rowId+')').css({ 'background-color': '#ccc' } );
    });
});