JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="#down">Тынц</a>
    </li>
</ul>
<main>
    <div id="down"></div>
</main>

CSS

main {
    padding-top: 1000px;
}
main div {
    min-height: 1000px;
    background: red;
}

JavaScript

$(document).ready(function(){
    $('a[href^="#"]').on({
      click: function (e) {
        e.preventDefault();

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

        $('html, body').stop().animate({
          'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
          window.location.hash = target;
        });
      }
    });
});