JSFiddle - React, Tailwind, and code Playground

HTML

<div id="landing">
  <p>landing</p>
  <button class="w3-btn" onclick="ScrollTo('page2')">Page 2</button>
</div>
<div id="page2">
  <p>page2</p>
  <button class="w3-btn" onclick="ScrollTo('page3')">Page 3</button>
</div>
<div id="page3">
  <p>page3</p>
  <button class="w3-btn" onclick="ScrollTo('landing')">Landing</button>
</div>

CSS

div {
  border: 2px solid #000;
  height: 700px;
  width: 400px;
}

JavaScript

function ScrollTo(name) {
  //init thread
  ScrollToResolver(document.getElementById(name));
}

function ScrollToResolver(elem) {
  var jump = parseInt(elem.getBoundingClientRect().top * .2);
  document.body.scrollTop += jump;
  document.documentElement.scrollTop += jump;
  //lastjump detects anchor unreachable, also manual scrolling to cancel animation if scroll > jump
  if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
    elem.lastjump = Math.abs(jump);
    setTimeout(function() {
      ScrollToResolver(elem);
    }, "100");
  } else {
    elem.lastjump = null;
  }
}