JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    div:not(:target) {
      display: none;
    }
    
    div:target {
      display: block;
    }
  </style>
</head>
<body>  
  <a href="#tab-1">Tab One</a>
  <a href="#tab-2">Tab Two</a>

  <div id="tab-1">
    Tab one contents
  </div>
  
  <div id="tab-2">
    Tab two contents
  </div>  
</body>
</html>

JavaScript

var tabs = document.querySelectorAll("a");
var scrollX = 0;
var scrollY = 0;
var blockScroll = false;

for (var i=0;i < tabs.length; i++) {
    tabs[i].addEventListener("click", function(e) {
        scrollX = window.pageXOffset;
        scrollY = window.pageYOffset;
        blockScroll = true;
    });
};

window.addEventListener('hashchange', function() {
    window.scrollTo(scrollX, scrollY);
}, false);

window.addEventListener('scroll', function() {
    if (blockScroll) {
        blockScroll = false;

        window.scrollTo(scrollX, scrollY);
    }
});