JSFiddle - React, Tailwind, and code Playground

HTML

<div id="startzone"></div>Principio de nuestra página. <a data-zone="endzone" class="menu-button" href="#">Ir al final</a>
<br>
    <div class="body">Final de la web.</div> <a data-zone="startzone" class="menu-button" href="#">Ir al principio</a><div id="endzone"></div>

CSS

div.body {
    margin-top: 600px;
}

JavaScript

$('.menu-button').click(function (e) {
    var puntero = $(this).data('zone');
    var distancia = $('div[id^="' + puntero + '"]').offset();
    e.preventDefault();
    
    if ($(this).data('zone') !== "all") {
        $('body,html').animate({
            scrollTop: distancia.top - 50 + 'px'
        }, 600);
    }
});