JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<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>
<input type='button' value='baja' id='btn'/>

CSS

div {
    width: 100px;
    height: 70px;
    border: 1px solid blue;
    overflow: auto;
}

JavaScript

$(document).ready(function (){
    var i = 8;
    $('#btn').click( function (){
        var container = $('div')
        i++;
        scrollTo = $('#row_'+i);

        container.animate({
            scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
        });
    });
});



/*
container.scrollTop(
    scrollTo.offset().top - container.offset().top + container.scrollTop()
);
*/