JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.mygraphicsweb.it/js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script src="http://mygraphicsweb.it/js/jquery.easing-1.3.pack.js"></script>
<body>
<ul id="nav">
 
  <li class="top"><a href="javascript:void(0)">Home</a></li>
  <li class="bottom"><a href="javascript:void(0)">About</a></li>
 
</ul>
    
<section id="home">
<p>Qui puoi inserire tutto il testo che vuoi, cosi da vedere realmente l'effetto dello scroll</p>
</section>
 
<section id="about">
<p>Se stai leggendo, significa che hai visto l'effetto</p>
</section>
</body

CSS

#home {
padding-bottom:500px;
}
#about {
margin-top:500px;
padding-bottom:50px;
}

JavaScript

$(document).ready(function() {
 
  $(".top").click(
      function(){
         $.scrollTo( '#home', 1000, {easing:'jswing'} );
  });
 
  $(".bottom").click(
      function(){
         $.scrollTo( '#about', 1000, {easing:'jswing'} );
  });
 
});//FINE DOM