JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body" id="body">
    <table>
        <tr class="lungs"><td></td></tr>
        <tr class="heart"><td>click here!</td></tr>
        <tr class="stomach"><td></td></tr>
    </table>
    
    <table>
        <tr class="hip"><td></td></tr>
        <tr class="knee" id="button"><td>click here!</td></tr>
        <tr class="foot" id="container"><td></td></tr>
    </table>    
</div>

CSS

.body
    {
    width:300px;
    height:300px;
    overflow:scroll;
    border:1px solid #face0d;
    }
.lungs td, .hip td
    {
    width:50px;
    border:1px solid blue;
    height:400px;
    }
.heart td, .knee td
    {
    width:50px;
    height:50px;
    border:1px solid red;
    }
.stomach td, .foot td
    {
    width:50px;
    height:50px;
    border:1px solid brown;
    }
.stomach, .foot
    {
    display:none;
    }

JavaScript

var scroll = document.getElementById('body'),
    btn = document.getElementById('button'),
    node = document.getElementById('container'),
    scrollTop;

btn.onclick = function(){
    scrollTop = scroll.scrollTop;
    node.style.display = node.style.display == 'table-row' ? 'none' : 'table-row';
    scroll.scrollTop = scrollTop;
};