JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scrollable">
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
        <li>item11</li>
        <li>item12</li>
        <li>item13</li>
        <li>item14</li>
        <li>item15</li>
        <li>item16</li>
        <li>item17</li>
        <li>item18</li>
        <li>item19</li>
        <li>item20</li>
    </ul>
</div>

CSS

div{
    width: 200px;
    height: 200px;
    overflow-y: scroll;
    position: relative;
}

ul{
    padding: 0;
    margin-bottom: 200px;
}

li{
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    line-height: 25px;
    padding: 0;
}

JavaScript

$('#scrollable li').on('click', function(e){
    $('#scrollable').animate({scrollTop: $(e.target).position().top + $('div').scrollTop()});
});