JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li id="target">F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
</ul>
<br>
<input type="radio" name="scroll" id="scrollTop" checked>scrollTop - works fine<br>
<input type="radio" name="scroll" id="scrollInto">scrollIntoView - causing whole page to move<br>

CSS

ul {
    width: 100px;
    height: 100px;
    overflow: auto;
}

li {
    height: 40px;
}

li:nth-child(odd) {
    background: blue;        
}

li:nth-child(even) {
    background: red;
}

li#target {
    background: green;
}

JavaScript

$("ul").click(function() {
    var target = document.getElementById("target");
if ($('#scrollTop').attr('checked')) {
    target.parentNode.scrollTop = target.offsetTop;    
} else {
		target.scrollIntoView(!0);
}
});