JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Name1</li>
    <li>Name2</li>
    <li>Name3</li>
    <li>Name4</li>
    <li >Name5</li>
    <li>Name6</li>
    <li>Name7</li>
    <li>Name8</li>
    <li>Name9</li>
    <li id="example">Name10</li>
</ul>

<button onClick="next()">Next</button>

CSS

ul{
    width:200px;
    height:100px;
    overflow:scroll;
    overflow-x: hidden;
    border:solid 1px black;
}

JavaScript

function next(){
    $("#example").css("background", "red");
}
function goToByScroll(id) {
    // Reove "link" from the ID
    // Scroll
    $('ul').animate({
        scrollTop: $("#" + id).offset().top - $("#" + id).height()
    },
        'slow');
}

$("button").click(function (e) {
    // Prevent a page reload when a link is pressed
    e.preventDefault();
    // Call the scroll function
    goToByScroll("example");
});