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

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

		var href = $(this.hash);

		if (href.length) {
			event.preventDefault();
			$('html, body').animate({
				scrollTop: href.offset().top - 85
			}, 750, function() {
				if (history.pushState) {
					history.pushState(null, null, '#' + href.attr('id'));
				} else {
					location.hash = href.attr('id');
				}
			});		
		}
	});