JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block target">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
</div>

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button class="current">5</button>
<button>6</button>
<button>7</button>

CSS

.wrapper {
    margin-bottom: 10px;
    width: 300px;
    height: 200px;
    border: 1px solid #aaa;
    overflow-y: auto;
}
.block {
    color: #fff;
    width: 200px;
    text-align: center;
    line-height: 100px;
    margin: 10px auto;
    background: #080;
}
.block.target {
    color: #000;
    background: #faa;
}
.block:nth-child(1) { line-height: 110px; }
.block:nth-child(2) { line-height: 130px; }
.block:nth-child(3) { line-height: 140px; }
.block:nth-child(4) { line-height: 150px; }
.block:nth-child(5) { line-height: 160px; }
.block:nth-child(6) { line-height: 170px; }
.block:nth-child(7) { line-height: 100px; }

button {
    color: #fff;
    border: 0;
    cursor: pointer;
    background: #080;
}
.current {
    color: #000;
    background: #faa;
}

JavaScript

$(function(){

    $('button').on('click', setTarget)

    scroll()

    function scroll(){
        var $wrapper = $('.wrapper')
          , wrapper_height = $wrapper.outerHeight()
          , wrapper_top = $wrapper.offset().top
          , current_scroll = $wrapper.scrollTop() 
            
        var $target = $wrapper.find('.target')
          , target_height = $target.outerHeight()
          , target_top = $target.offset().top + current_scroll
        
        scrollTop = (target_top - wrapper_top)
                  - (wrapper_height - target_height)/2
        
        $wrapper.stop().animate({scrollTop: scrollTop})

        // или просто без анимации
        //$wrapper.scrollTop(scrollTop)
    }
    
    function setTarget(e){
        var $btn = $(this)
          , $buttons = $('button')
          , index = $buttons.index($btn)
          , $blocks = $('.block')  
        
        $buttons.removeClass('current')
        $btn.addClass('current')
        
        $blocks.removeClass('target')
        $blocks.eq(index).addClass('target')
        
        scroll()
    }
})