JSFiddle - React, Tailwind, and code Playground

HTML

<button>Find "Orange"</button>
<ul>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Orange</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
    <li>Apple</li>
</ul>

CSS

.selected {
    background: yellow;
}

JavaScript

$("button").on("click", function() {
    $("li").each(function(i, element) {
        var li = $(element);
        
        if (li.text() == "Orange") {
            li.addClass("selected");
            var position = li.offset().top; 
            var windowHeight = $(window).height();
            
            $("body").scrollTop(position - (windowHeight/2));
        }
    });
});