JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="progress-nav" class="placeholder on light" style="opacity: 1;">
    <ul>
        <li><a data-scene="hero" class="hero progress-nav-trigger"><span class="dot"></span><span class="hover-text">InĂ­cio</span></a>

        </li>
        <li><a data-scene="forward" class="forward dark progress-nav-trigger active"><span class="dot"></span><span class="hover-text">Design</span></a>

        </li>
        <li><a data-scene="smart" class="smart progress-nav-trigger"><span class="dot"></span><span class="hover-text" style="right: 47px;">CaracterĂ­sticas</span></a>

        </li>
        <li><a data-scene="ios" class="ios progress-nav-trigger"><span class="dot"></span><span class="hover-text">iOS 7</span></a>

        </li>
        <li><a data-scene="cases" class="cases progress-nav-trigger"><span class="dot"></span><span class="hover-text">Capa</span></a>

        </li>
    </ul>
</nav>
<section id="hero" class="foo">
    <div>hero</div>
</section>
<section id="forward" class="foo">
    <div>forward</div>
</section>
<section id="smart" class="foo">
    <div>smart</div>
</section>
<section id="ios" class="foo">
    <div>IOS</div>
</section>
<section id="cases" class="foo">
    <div>cases</div>
</section>

CSS

section {
    height: 300px;
}
nav {
    position: fixed;
    right: 50px;
    top: 50px;
    cursor: pointer;
}

JavaScript

var posicao = {
    atual: 0,
    elementos: $('section').map(function (section) {
        return $(this).position().top
    })
};
posicao.total = posicao.elementos.length;

function fazerScroll(pos) {
    $(document.body).animate({
        scrollTop: pos
    }, 1000);
}

$(document).on('mousewheel', function (e) {
    e.preventDefault();

    var evento = e.originalEvent;
    var roda = (evento.wheelDelta) ? evento.wheelDelta : -(evento.detail || evento.deltaY);
    roda < 0 ? posicao.atual++ : posicao.atual--;
    if (posicao.atual < 0) posicao.atual = 0;
    if (posicao.atual > posicao.total) posicao.atual = posicao.total;
    fazerScroll(posicao.elementos[posicao.atual]);
});

$('#progress-nav a').on('click', function (e) {
    e.preventDefault();
    var idDestino = $(this).data('scene');
    var posicaoDestino = $('#' + idDestino).position().top;
    fazerScroll(posicaoDestino);
});