JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#anchor">Scroll to Anchor</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="anchor">Here!</div>

<script
  src="https://code.jquery.com/jquery-3.2.1.js"></script>

JavaScript

$(function() {
  var scrollTag = ( window.chrome || 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html';
$('a[href^="#"]').on('click', function(e) {
    e.preventDefault();
    var speed = 600;
    var href = $(this).attr('href');
    var target = $(href == "#" || href == "" ? 'html' : href);
    var headerHeight = 85;
    var position = target.get(0).offsetTop - headerHeight;
	 setTimeout(function() {
    $(scrollTag).css('overflow', 'hidden').animate({
      scrollTop: position
    }, speed).css('overflow', 'auto');
	 }, 50);
  });
});