JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one"><a class="link" href="da#test">TEST</a></div>
<a id="test">ANCHOR</a>
<div id="two"><a class="link" href="ws#test2">TEST2</a></div>
<a id="test2">ANCHOR</a>

CSS

#one {
    height: 1200px;
    background: #F30;
}
#two {
    height: 1200px;
    background: green;
}

JavaScript

$('.link').on('click', function(event) {
    event.preventDefault();
    var target = $(this).attr('href');
    target = $('#' + target.split('#')[1]);
    if( target.length ) {
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);
    }
});