JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<div id='div' >
<table id="table" border="1">
	<thead>
		<tr>
			<th>h1</th>
			<th>h2</th>
			<th>h3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
		<tr class="active">
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
        		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
	</tbody>
    <tfoot>
        <tr>
			<td>A</td>
			<td>B</td>
			<td>C</td>
		</tr>
    </tfoot>
</table>
</div>
<button id='scroll'>scroll</button>

CSS

thead th, tbody td, tfoot td {
    width:100px;
}

tbody {
    height:300px;
}

tbody, thead, tfoot {
    display:block;
}

tbody{
    overflow-y:auto;
}

tr.active{
    background:red;
}
}

JavaScript

$('#scroll').on('click',function(e){
        var ypos = $('#table tr.active').offset().top - $("#table").offset().top - $('#table tr.active').height() ;
        $('#table tbody').animate({
            scrollTop: $('#table tbody').scrollTop() + ypos
        }, 500);        
    });