JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <body>
        <div class="menu">
            <a href="#1">1</a>
            <a href="#2">2</a>
            <a href="#3">3</a>
            <a href="#4">4</a>
        </div>
        <section id="1">1</section>
        <section id="2">2</section>
        <section id="3">3</section>
        <section id="4">4</section>
    </body>
</html>

CSS

html,
body
{
    width: 100%;
    height: 100%;
}

.menu
{
    position: fixed;
    width: 100%;
    background: white;
}

section
{
    width: 100%;
    height: 100%;
    padding: 30px 0;
    background: gold;
}

JavaScript

function goToByScroll( handleId, event ) {
    event.preventDefault();
    $('body').stop().animate(
        { scrollTop: $(handleId).position().top },
        500,
        function( ) {
            window.location.hash = handleId;
        }
    );
}

$('.menu a').on( 'click', function( event ) {
    var handle = $(this),
        handleId = handle.attr('href');
    goToByScroll( handleId, event );
});