JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navbar-menu">
   <li><a class="scrolling" href="#home">MENU 1</a></li>
   <li><a class="scrolling" href="#portfolio">MENU 2</a></li>
   <li><a class="scrolling" href="#videos">MENU 3</a></li>
   <li><a class="scrolling" href="#contact">MENU 4</a></li>
</ul>

<section id="home">home</section>
<section id="portfolio">portfolio</section>
<section id="videos">videos</section>
<section id="contact">videos</section>

SCSS

.navbar-menu {
  li {
    display: inline-block;
  }
}

section {
  height: 120vh;
  font-size: 50px;
  color: #fff;
  
  &:nth-child(odd) { background-color: red; }
  &:nth-child(even) { background-color: green; }
}

JavaScript

$(document).ready(function () {
       $('.scrolling').click(function (e) {
       
       var linkHref = $(this).attr('href');
       console.log($(linkHref).offset().top);
       
       $('html, body').animate({
           scrollTop: $(linkHref).offset().top
       }, 1000);
       
       e.preventDefault();
      });
  });