JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <div data-destino="parte1">Parte 1</div>
    <div data-destino="parte2">Parte 2</div>
</div>
<div id="parte1"></div>
<div id="parte2"></div>

CSS

.menu {
    width: 100%;
    height: 50px;
}
.menu div {
    float: left;
    padding: 10px;
    border: 1px solid black;
}
#parte1, #parte2 {
    width: 100%;
    height: 600px;
    border: 2px solid #aac;
}

JavaScript

$('.menu div').on('click', function () {
    var destino = '#' + $(this).data('destino');
    var posicaoDestino = $(destino).position().top;
    $('html, body').stop().animate({
        scrollTop: posicaoDestino
    }, 2000);
});