JSFiddle - React, Tailwind, and code Playground

HTML

<div class="controls">    
    <button>scrollTo 1</button>
    <button>scrollTo 2</button>
    <button>scrollTo 3</button>
</div>

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>

CSS

body { padding-top: 1px }

.controls {
    position: fixed;
}

.box {
    height: 1000px;    
    margin: 100px;
    
    border: 1px solid #000;
    font-size: 100px;
}

JavaScript

var btn = $('button'),
    box = $('.box');

btn.on('click', function() {
    var ind  = $(this).index(),
        scrl = box.eq(ind).offset().top - 80; // 80 - отступ от верхнего края страницы
    
    $('html, body').animate({
        scrollTop: scrl
    }, 300);
});