JSFiddle - React, Tailwind, and code Playground

by Poter

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body data-spy="scroll" data-target="#menu" data-offset="56">
<!--  56 высота меню -->
 <nav id="menu" class="navbar navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#s1">s1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#s2">s2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#s3">s3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link top" href="#s1">TOP</a>
    </li>
  </ul>
</nav>

  <section id="s1"><h1>s1</h1></section>
  <section id="s2"><h1>s2</h1></section>
  <section id="s3"><h1>s3</h1></section>
</body>

CSS

section {
  height: 100vh;
  display:flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.wrapper{
  position: relative;
  height: 200px;
}
.nav-link.top.active{
  color: #007bff;
  background-color: transparent;
}
#s1{
  background-color: red;
}
#s2{
  background-color: blue;
}
#s3{
  background-color: green;
}
body{
  position: relative;
}

JavaScript

$(document).ready(function() {
	$("#menu a").click(function(e) {
  	e.preventDefault();
  	let el = e.currentTarget;
    aScroll(el);
    $('#menu').collapse('hide');
  });
  function aScroll(el) {
	  let id = $(el).attr('href'),
		//узнаем высоту от начала страницы до блока на который ссылается якорь
    top = $(id).offset().top;
		//анимируем переход на расстояние - top за 1500 мс
    $('body,html').animate({
    	scrollTop: top - 56 // 56 высота меню
    }, 1000);
 	}
});