JSFiddle - React, Tailwind, and code Playground

HTML

<div id="headernav">Headernav</div>
<a href="#test" title="Boom">Klick mich!</a>
<div id="test">Hey, klappt es?</div>

CSS

#test {
    margin-top: 1900px;
    background: red;
    color: #fff;
}
#headernav {height: 40px;}

JavaScript

$(document).ready(function() {
    $('a[href*=#]').bind('click', function(event) {
        event.preventDefault();
        var ziel = $(this).attr('href');
        $('html,body').animate({
            scrollTop: $(ziel).offset().top - $('#headernav').outerHeight()
        }, 2000, function (){location.hash = ziel;});
    });
    return false;
});