JSFiddle - React, Tailwind, and code Playground

by Ankit Singhania

HTML

<section id="1">
    1
</section>
<section id="2">
    2
</section>
<section id="3">
    3
</section>
<section id="4">
    4
</section>
<div id="menu">
    <a href="#1">1</a>
    <a href="#2">2</a>
    <a href="#3">3</a>
    <a href="#4">4</a>
</div>

CSS

*{
    margin : 0;
    padding : 0;
}
section{
    height : 500px;
}
#menu{
    position : fixed;
    right : 100px;
    top : 0;
}
#menu a.active{
    color : red;
}

JavaScript

var timerid; //Used to fire scroll function once after scrolling is done.
$(document).ready(function(){
    $("#menu a").click(function(e){
        e.preventDefault();
        $("#menu a").removeClass('active');
        var id = $(this).attr("href").substring(1);
        $("body").animate({
            'scrollTop': $("section#" + id).offset().top
        });        
    });
    $("body").scrollTop(1); //forcing window scroll to execute on page load
    $(window).scroll(function(){
        clearTimeout(timerid);
        timerid = setTimeout(checkactivelink, 50);
    });
    
    function checkactivelink()
    {
        $("section").each(function(){
            if($("body").scrollTop() >= $(this).offset().top)
            {
                $("#menu a").removeClass('active');
                    $("#menu a[href=#" + $(this).attr("id") + "]").addClass('active');
            }
        });
    }
});