JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    Header: <a href="#target">Click me!</a>
</div>

<div id="target">My target content!</div>

CSS

div#header{
   position:fixed;
   top:0px;
   width:100%;
   height:80px;
   background:red; 
}

div#target{
   position:absolute;
   top:3000px;
   height:1000px;
   font-size:40px;
   border-top:1px solid red; 
}

JavaScript

// Attach the click event
$('a[href*=#]').bind("click", function(e) {
    
    var target = $(this).attr("href"); //Get the target
    var scrollToPosition = $(target).offset().top - 80;
    
    $('html').animate({ 'scrollTop': scrollToPosition }, 600, function(target){
        window.location.hash = target;
    });
    
    e.preventDefault();
});