JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <a href='#azul'>Azul</a>
    <a href='#verde'>Verde</a>
    <a href='#vermelho'>Vermelho</a>
</nav>

<div id='azul'></div>
<div id='verde'></div>
<div id='vermelho'></div>

CSS

nav {
    background: #fff;
    position: fixed;
    top: 0; left: 0; right: 0;
    text-align: center
}


div {
    height: 500px;
    width: 100%
}

#azul {
    background: #2980b9
}

#verde {
    background: #2ecc71
}

#vermelho {
    background: #e74c3c
}

JavaScript

$(document).ready(function () {
    function filterPath(string) {
        return string
            .replace(/^\//, '')
            .replace(/(index|default).[a-zA-Z]{3,4}$/, '')
            .replace(/\/$/, '');
    }
    $('a[href*=#]').each(function () {
        if (filterPath(location.pathname) == filterPath(this.pathname)
                && location.hostname == this.hostname
                && this.hash.replace(/#/, '')) {
            var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) + ']');
            var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
            if ($target) {
                var targetOffset = $target.offset().top;
                $(this).click(function () {
                    if($(window).width() > 200){
                        $('html, body').animate({scrollTop: targetOffset}, 300);
                        return false;
                    }
                });
            }
        }
    });
});