JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li><a href="#item1">1</a></li>
    <li><a href="#item2">2</a></li>
    <li><a href="#item3">3</a></li>
    <li><a href="#item4">4</a></li>
    <li><a href="#item5">5</a></li>
    <li><a href="#item6">6</a></li>
    <li><a href="#item7">7</a></li>
    <li><a href="#item8">8</a></li>
    <li><a href="#item9">9</a></li>
    <li><a href="#item10">10</a></li>
</ul>
<div id="container">
    <ul id="list">
        <li class="item" id="item1">1</li>
        <li class="item" id="item2">2</li>
        <li class="item" id="item3">3</li>
        <li class="item" id="item4">4</li>
        <li class="item" id="item5">5</li>
        <li class="item" id="item6">6</li>
        <li class="item" id="item7">7</li>
        <li class="item" id="item8">8</li>
        <li class="item" id="item9">9</li>
        <li class="item" id="item10">10</li>
    </ul>
</div>

CSS

body{
    margin: 0;
}
.nav{
    position: fixed;
    top: 0;
    z-index: 99;
    background: #000;
    width: 100%;
   
}
.nav li{
    display: inline-block;
    margin-left: 5px;
    padding: 2px 5px;
}

.nav li a{
    color: #fff;
}

.item {
    height: 100px;
    display: block;
}

.item:nth-child(odd) {
    background-color: grey;
}


#container {
    margin-top: 150px;
    border: 1px solid grey;
    height: 300px;
    overflow-y: scroll;
     
}

#list {
   
    margin: 0;
}

JavaScript

$('.nav li a').click(function(e){
    e.preventDefault();

    var itemTop = $($(this).attr('href'))[0].offsetTop;
    var itemHeight = $($(this).attr('href')).height();
    var containerHeight = $('#list').height();
    alert(itemTop + '*');
    $('#container').animate({scrollTop:itemTop + itemHeight/2 - containerHeight/2},500)
});