JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#test1">Test1</a>
<a href="#test2">Test2</a>
<a href="#test3">Test3</a>

<div class="test1" id="test1">Test1</div>
<div class="test2" id="test2">Test2</div>
<div class="test3" id="test3">Test3</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

CSS

.test1 {
    margin-top:10px;
    height:200px;
    width:200px;
    background:#ccc;
    position:relative;
}

.test2 {
    margin-top:10px;
    height:200px;
    width:200px;
    background:#ccc;
    position:relative;
}

.test3 {
    margin-top:10px;
    height:200px;
    width:200px;
    background:#ccc;
    position:relative;
}

JavaScript

$(document).ready(function(){
    $('a[href^="#"]').bind('click.smoothscroll',function (e) {
        e.preventDefault();
      
        var target = this.hash,
        $target = $(target);
      
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 500, 'swing', function () {
            window.location.hash = target;
            
            // lets add a div in the background
            $('<div />').css({'width':'100%','height':'100%','position':'absolute','display':'none','background':'red','top':'0', 'left':'0'}).prependTo($target).fadeIn('fast', function(){
                $(this).fadeOut('fast', function(){
                    $(this).remove();
                });
            });
            
        });
    });
});