JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="inner" style="top: 0;">
        <div class="group" style="background: red;"><a id="0" href="#">X</a></div>
        <div class="group" style="background: blue;"><a id="1" href="#">Y</a></div>
        <div class="group" style="background: green;"><a id="2" href="#">Z</a></div>
    </div>
</div>

<button onclick="document.getElementById('inner').style.top = '-182px';">Down</button>

CSS

#outer {
    width: 300px;
    height: 182px;
    overflow: hidden;
    background: black;
}
#inner { position: relative; }
.group { width: 300px; height: 182px; background: red;}

JavaScript

jQuery(document).ready(function() {
    
    initialTop = jQuery('#inner').offset().top;
    
    jQuery('.group a').focus(function() {
        var absoluteShift = -(jQuery(this).attr('id') * 182);
        jQuery('#inner').offset({top: (absoluteShift  + initialTop)});
    });
});