JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>

<html lang="en">


<head></head>


<body id="home">

<!-- Navigation -->

	<nav><a href="#section1">Section #1</a></nav>
  
<!-- Main Content -->

	<main>
  
  
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
		
    <h2 id="section1">section1</h2>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

	
	</main>


</body>


</html>

CSS

nav {
	position:fixed;
  padding:4px;
	border:2px solid #000;
	width:100%;
  line-height:2.25em;
  background-color:yellow;
	}
  
h2 {
  padding:4px;
  border:1px solid #000;
  width:100%;
  line-height:100px;
  background-color:red;
}

JavaScript

$(document).ready(function() {
	
	$('a[href*="#"]').click(function(event) {

		var href = $(this.hash);

		if (href.length) {
			event.preventDefault();
			$('html, body').animate({
				scrollTop: href.offset().top - 100
			}, 750, function() {
				location.hash = href.attr('id');
			});		
		}
	});
});