JSFiddle - React, Tailwind, and code Playground

HTML

<button id="goSegundo">Segundo</button>
<div id="primero"><h1>Primero</h1></div>
<div id="segundo"><h1>Segundo</h1><button id="goTercero">Tercero</button></div>
<div id="tercero"><h1>Tercero</h1></div>

CSS

#primero {
    height: 500px;
}

#segundo {
    height: 500px;
}

#tercero {
    height: 500px;
}

JavaScript

$('#goSegundo').on('click', function(e){
    var posY = $('#segundo').offset().top;
    $('html, body').animate({'scrollTop': posY}, 1000);
});

$('#goTercero').on('click', function(e){
    var posY = $('#tercero').offset().top;
    $('html, body').animate({'scrollTop': posY}, 1000);
});