JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="narkotiki">
        <li class="active"><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
        <li><a href="#four">Four</a></li>
        <li><a href="#footer">Five</a></li>
</ul>
    <section id="one">
        <p>Задача организации, в особенности же новая модель организационной деятельности требуют определения и уточнения направлений прогрессивного развития. Не следует, однако забывать, что постоянный количественный рост и сфера нашей активности требуют от нас анализа позиций, занимаемых участниками в отношении поставленных задач. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке позиций, занимаемых участниками в отношении поставленных задач.</p>
    </section>
    <section id="two">
        <p>Задача организации, в особенности же новая модель организационной деятельности требуют определения и уточнения направлений прогрессивного развития. Не следует, однако забывать, что постоянный количественный рост и сфера нашей активности требуют от нас анализа позиций, занимаемых участниками в отношении поставленных задач. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке позиций, занимаемых участниками в отношении поставленных задач.</p>
    </section>
    <section id="three">
        <p>Задача организации, в особенности же новая модель организационной деятельности требуют определения и уточнения направлений прогрессивного развития. Не следует, однако забывать, что постоянный количественный рост и сфера нашей активности требуют от нас анализа позиций, занимаемых участниками в отношении поставленных задач. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке позиций, занимаемых участниками в отношении поставленных задач.</p>
    </section>
    <section id="four">
       ...

CSS

section {
       height: 1000px;
        display: block;
}

JavaScript

$('body').on('mousewheel', function(event) {
            var krut = (event.deltaY);
            if (krut > 0) {
                var actbl = $("#narkotiki").children(".active");
                var actb2 = $("#narkotiki .active").children("a").attr('href');
                if (actb2 == ("#one")) {
                } else {
                    actbl.removeClass("active");
                    actbl.prev($("#narkotiki li")).addClass("active");
                    $("#narkotiki .active a").trigger("click");
                };
            } else if (krut < 0) {
                var actbl = $("#narkotiki").children(".active");
                var actb2 = $("#narkotiki .active").children("a").attr('href');
                if (actb2 == ("#footer")) {} else {
                    actbl.removeClass("active");
                    actbl.next($("#narkotiki li")).addClass("active");
                    $("#narkotiki .active a").trigger("click");
                }
            };
        });


        $(document).ready(function() {
            // = Вешаем событие прокрутки к нужному месту
            //   на все ссылки якорь которых начинается на #
            $('a[href^="#"]').bind('click.smoothscroll', function(e) {
                e.preventDefault();

                var target = this.hash,
                    $target = $(target);

                $('html, body').stop().animate({
                    'scrollTop': $target.offset().top - ($('ul').height() + 70)
                }, 600, 'swing', function() {
                    window.location.hash = target;
                });
            });

        });