JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page1">
    <a href="#section1" id="a1">Ir a sección 1</a>
    <a href="#section2" id="a2">Ir a sección 2</a>
</div>
<div class="page2">
    <div id="section1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos molestias nobis fugiat cupiditate autem unde dolore? Consequuntur repudiandae voluptatem numquam a amet saepe error debitis totam aperiam tempora hic magni.
    </div>
</div>
<div class="page3">
    <div id="section2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit vero necessitatibus quia tempore autem harum eveniet! Provident nostrum nobis pariatur officiis quia earum quod asperiores magni veniam laborum. Rem nemo.
    </div>
</div>

CSS

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.page1, .page2, .page3 {
    height: 100vh;
}

JavaScript

$(document).on('ready', function() {
    $('#a1').on('click', function(e) {
        e.preventDefault();
        $("html, body").animate({scrollTop: $('#section1').offset().top }, 1000);
    });
    $('#a2').on('click', function(e) {
        e.preventDefault();
        $("html, body").animate({scrollTop: $('#section2').offset().top }, 1000);
    });
});