JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="main">
    <ul>
        <li><a id="link-top" href="#top" class="scroll"></a></li>
        <li><a id="link-middle" href="#middle" class="scroll"></a></li>
        <li><a id="link-bottom" href="#bottom" class="scroll"></a></li>
    </ul>
</nav>
<section id="top">
    1
</section>

<section id="middle">
    2
</section>

<section id="bottom">
    3
</section>

CSS

nav#main { position:fixed; top:45%; right:20px; z-index:9999; }
nav#main a { margin-bottom:10px; background: #000; display:block; height:15px; width:15px; overflow:hidden; }
nav#main a:hover, nav#main li a.active { background: #ff0; }

#top { width:100%; height:800px; background: #eee; }
#middle { width:100%; height:800px; background: #ddd; }
#bottom { width:100%; height:640px; background: #aaa; }

body { font-size: 100px; }

JavaScript

$(document).ready(function(){
    
    $('.scroll').click(function(event) {
        event.preventDefault();
 
        var full_url = this.href;
        
        var parts = full_url.split('#');
        var trgt = parts[1];

        var target_offset = $('#'+trgt).offset();
        var target_top = target_offset.top;

        $('html, body').animate({scrollTop:target_top}, 500);


    });
    
    $('nav#main a').click(function(){
         $('nav#main a').removeClass('active');
         $(this).addClass('active');
    });
    
});