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">
    <div id="un" class="item">un</div>
    <div id="deux" class="item">deux</div>
    <div id="trois" class="item">trois</div>
    <div id="quatre" class="item">quatre</div>
    <div id="cinq" class="item">cinq</div>
    <div id="six" class="item">six</div>
    
</div>

CSS

.item { height: 100px;}
#screen {height : 200px;
    overflow:auto;
}

JavaScript

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


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