JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#first">go to first</a></li>
    <li><a href="#second">go to second</a></li>
    <li><a href="#third">go to third</a></li>
    <li><a href="#fourth">go to forth</a></li>
    <li><a href="#fifth">go to fifth</a></li>
    <li><a href="#sixth">go to sixth</a></li>
    <li><a href="#seventh">go to seventh</a></li>
</ul>

<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="fifth">Fifth</div>
<div id="sixth">Sixth</div>
<div id="seventh">Seventh</div>

CSS

div {
    height:200px;
    width:100%;
    margin-bottom:40px;  
}

#first{
    background-color: red;   
}

#second{
    background-color: green;  
}

#third{
    background-color: blue;  
}

#fourth{
    background-color: orange;  
}

#fifth{
    background-color: pink;  
}

#sixth{
    background-color: purple;  
}

#seventh{
    background-color: yellow;  
}

JavaScript

$(document).ready(function() {

    function addClick(anchor,theUrl,i){
         anchor.click(function() {
                var whereToGo = theUrl.substr(theLocation);

                $('html, body').animate({
                    scrollTop: $(eval('"' + whereToGo + '"')).offset().top
                }, 333);
                


                //hold it right there  
                return false;

            });
    }
    
    var allTheLinks = $("a");
    var linksLength = allTheLinks.length;

    //go through all the links   
    for (var i = 0; i < linksLength; i++) {

        var theLink = allTheLinks.eq(i);
        var theUrl = theLink.attr("href");
        var theLocation = theUrl.indexOf("#");


        //check for #
        if (theLocation > -1) {
           addClick(theLink,theUrl,i)
        }
    }


});