JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li>un</li>
    <li>deux</li>
    <li>trois</li>
    <li>quatre</li>
    <li>cinq</li>
    <li>six</li>
</ul>
<div id="screen">
    <table>
        <tr class="item" id="un"> <td>un</td></tr>
        <tr class="item" id="deux"> <td>deux</td></tr>
        <tr class="item" id="trois"> <td>trois</td></tr>
        <tr class="item" id="quatre"> <td>quatre</td></tr>
        <tr class="item" id="cinq"> <td>cinq</td></tr>
        <tr class="item" id="six"> <td>six</td></tr>
    </table>
    
</div>

CSS

.item { height: 25px;}
#screen {height : 50px;
    border: solid 1px silver;
    overflow:auto;
}

JavaScript

$( function(){
$('#screen').get(0).scrollTop=0;
    $.each($('.item'), function(){
        $(this).data('siv',$(this).offset().top-$('#screen').offset().top- $(this).height()/2);
    })    


    $('#menu li').on('click', function(){
    elttop=$('#'+$(this).text()).data('siv')
    console.log(elttop);
    $('#screen').get(0).scrollTop=elttop;
    })
})