JSFiddle - React, Tailwind, and code Playground

HTML

<div class="space-container"><a href="#scroll-to">scroll page</a></div>
<div id="scroll-to">scroll to me</div>
<div class="space-container"></div>

CSS

html, body {
    overflow:hidden;
}
.space-container{
    height: 3000px;
}
/* #scroll-to{
    padding-top: 40px;
    margin-top: -40px;
} */

JavaScript

$('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top-100
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });