JSFiddle - React, Tailwind, and code Playground

HTML

<ul style="margin-bottom: 100px;">
<li><a href="#about1">Link One</a></li>
<li><a href="#about2">Link Two</a></li>
<li><a href="#about3">Link Three</a></li>
<li><a href="#about4">Link Four</a></li>
<li><a href="#about5">Link Five</a></li>
</ul>

<p>
<a id="about1"></a>
#1
 Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
  Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum...

CSS

p
{
	margin: 400px auto;
	background-color: #D4D4D4;
}

JavaScript

$(document).ready(function ()
{

    var $root = $('html, body'); // Caching the selector, so that it doesn't run every single time an anchor is clicked.

    $('a[href*="#"]:not([href="#"])').on('click', function (event) {
        event.preventDefault(); // Prevent the "normal" behaviour which would be a "hard" jump.

        var target = this.hash;
        var $target = $(target);

        $root.stop().animate({
            scrollTop: $target.offset().top - 62
        }, 900, 'swing', function () {
            //window.location.hash = target;
            //window.location.hash = target.substr(1);
            //window.history.pushState(null, null, this.hash);
        });
    });
});