JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <img class="active" src="http://placehold.it/100x100/aaafff" />
    <img src="http://placehold.it/100x100/fffaaa" />
    <img src="http://placehold.it/100x100/bbbccc" />
    <img src="http://placehold.it/100x100/ccceee" />
    <img src="http://placehold.it/100x100/aaaddd" />
    <img src="http://placehold.it/100x100/dddeee" />
    <img src="http://placehold.it/100x100/fffedc" />    
</div>

CSS

body { min-height: 2000px; }
img { display: block; margin: 10px; }
img.active { border: 2px dotted red; }

JavaScript

$(window).keydown(function(e) {
    e.preventDefault(); //prevent default arrow key behavior
    
    var targetElement;
    //down
    if (e.keyCode == 40) {
        $targetElement = $('.active').next('img');
    }
    //up
    else if (e.keyCode == 38) {
        $targetElement = $('.active').prev('img');
    }
    if (!$targetElement.length) {return;}
    $('.active').removeClass('active');
    $targetElement.addClass('active');
    
    //scroll element into view    
    $('html, body').clearQueue().animate({scrollTop: $targetElement.offset().top }, 1000);
});