JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#b">Some nice link text</a>
<div id="a"></div>
<div id="b"></div>

CSS

div{
  width: 100%;
  height: 700px;
  display: block;
}

#a{ background: green;}
#b{ background: yellow;}

JavaScript

$(document).ready(function () {
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();

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

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});