JSFiddle - React, Tailwind, and code Playground

HTML

<div class=container>
    <div id=e1>1</div>
    <div id=e2>This is element 2 :)</div>
    <div id=e3><img src="https://placekitten.com/g/50/110"></div>
    <div id=e4>4</div>
    <div id=e5>look, i am element 5. i haz a lot of text. lalala!</div>
    <div id=e6><img src="https://placekitten.com/g/70/150"></div>
    <div id=e7>7 is a lucky number. It comes right before 8</div>
    <div id=e8>8</div>
    <div id=e8>9</div>
</div>
        
<div id="goto" >Go to element 4</div>

CSS

.container
{
    background: lightgrey;
    padding: 10px;
    width: 120px;
    height: 200px;
    overflow: auto;
}

.container div
{
    display: flex;
    width: 100px;
    background: orange;
    justify-content: center;
    align-items: center;
    margin: 5px;
}

a
{
    margin-top: 1em;
    display: block;
}

JavaScript

$( document ).ready(function() {
    $("#goto").click(function() {
        $(".container").scrollTop($(".container").scrollTop()+($("#e4").position().top - $(".container").height()/2) );    
    })
});