JSFiddle - React, Tailwind, and code Playground

HTML

<aside>
    <ul>
        <li><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="#five">Five</a></li>
        <li><a href="#six">Six</a></li>
    </ul>
</aside>

<div id="main">
    <h2 id="one">One</h2>
    <p>Тут текст Lorem Ipsum</p>
    <h2 id="two">Two</h2>
    <p>Тут текст Lorem Ipsum.</p>
    <h2 id="three">Three</h2>
    <p>Тут текст Lorem Ipsum</p>
    <h2 id="four">Four</h2>
    <p>Тут текст Lorem Ipsum</p>
    <h2 id="five">Five</h2>
    <p>Тут текст Lorem Ipsum</p>
    <h2 id="six">Six</h2>
    <p>Тут текст Lorem Ipsum</p>
</div>

CSS

#main h2 {
    margin-top:400px;
}
ul{
    position:fixed;
    top: 0px;
}
ul li{
    display:inline-block;
}

JavaScript

$(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()+ 100)  
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });

});