JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <a href="#">
        <div class="option">
            Option 1
        </div>
    </a>
    <a href="#">
        <div class="option">
            Option 2
        </div>
    </a>
    <a href="#">
        <div class="option">
            Option 3
        </div>
    </a>
    <a href="#">
        <div class="option selected">
            Option 4
        </div>
    <a href="#">
        <div class="option">
            Option 5
        </div>
    </a>
    <a href="#">
        <div class="option">
            Option 6
        </div>
    </a>
    <a href="#">
        <div class="option">
            Option 7
        </div>
    </a>
</div>

CSS

#container {
    background-color: #F00;
    height: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 200px;
}
a {
    color: #FFF;
    text-decoration: none;
}
.option {
    background-color: #c0c0c0;
    padding: 5px;
    width: 200px;
}
.option:hover {
    background-color: #ccc;
}
.selected {
    background-color: #3c6;
}

JavaScript

$('.option').click(function(e){
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
    $(this).parent().parent().scrollTop(selected[0].offsetTop - 40);
});