JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#el1" class="click">Click this to scroll to element 1!</a><br />
<a href="#el2" class="click">Click this to scroll to element 2!</a><br />
<a href="#el3" class="click">Click this to scroll to element 3!</a><br />


<div id="el1">element 1</div>
<div id="el2">element 2</div>
<div id="el3">element 3</div>

CSS

div {
    margin-top:1000px;
}
div:last-child {
    padding-bottom:1000px;
}

JavaScript

$('.click').click(function(e){
   // prevent default action
   e.preventDefault();
   
   // get id of target div (placed in href attribute of anchor element)
   // and pass it to the scrollToElement function
    // also, use 2000 as an argument for the scroll speed (2 seconds, 2000 milliseconds)
   scrollToElement( $(this).attr('href'), 2000 );
});

var scrollToElement = function(el, ms){
    var speed = (ms) ? ms : 600;
    $('html,body').animate({
        scrollTop: $(el).offset().top
    }, speed);
}