JSFiddle - React, Tailwind, and code Playground
HTML
<span class="scrollto">a</span> <span class="scrollto">e</span> <span class="scrollto">i</span>
<div id='container'>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
<div id="e">e</div>
<div id="f">f</div>
<div id="g">g</div>
<div id="h">h</div>
<div id="i">i</div>
</div>
CSS
#container {
overflow: auto;
height: 50px;
}
.scrollto {
color: blue;
text-decoration: underline;
cursor: pointer;
}
JavaScript
$('.scrollto').click(function() {
$('#' + $(this).text()).get(0).scrollIntoView();
// or $('#' + $(this).text())[0].scrollIntoView();
});