JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li data-offset="block1">click one</li>
  <li data-offset="block2">click two</li>
  <li data-offset="block3">click three</li>
</ul>

<div class="content">
  <div class="block1">
    lorem ipsum 1
  </div>
  
  <div class="block2">
    lorem ipsum 2
  </div>
  
  <div class="block3">
    lorem ipsum 3
  </div>
</div>

CSS

.menu {
  position: fixed;
  top: 0;
  left: 0;
  border-bottom: 1px solid #000;
  padding: 0;
  z-index: 2;
}

.menu > * {
  display: inline-block;
  padding: 1rem;
  cursor: pointer;
}

.menu > *:hover {
  background: #c0c0c0;
}

.content {
  margin-top: 5rem;
  position: relative;
}

.content > * {
  min-height: 500px;
}

JavaScript

$(document).on("click", ".menu > *", function () {
  var block = $(this).attr("data-offset");
  $("html, body").stop().animate({ scrollTop: $('.' + block).offset().top - $(".menu").outerHeight() - 25 }, 500, 'swing');
});