JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div id="selected">selected</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
</div>

<a id="test">TEST</a>

CSS

#container { border:1px solid black; width:100px; max-height:75px; overflow-y:scroll; }
#containe > div { border-bottom:1px solid black; }

JavaScript

document.getElementById('test').addEventListener('click', (event) => {

	event.preventDefault();

	let el_container = document.getElementById('container'); 
  let e_element = document.getElementById('selected');

  el_container.scrollTo({
    top: e_element.getBoundingClientRect().top - el_container.getBoundingClientRect().top + el_container.scrollTop
	});

});