JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<nav>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
	<div id="acti1" class="acti" data-scrollTo="1"></div>
	<div id="acti2" class="acti" data-scrollTo="2"></div>
	<div id="acti3" class="acti" data-scrollTo="3"></div>
	<div id="acti4" class="acti" data-scrollTo="4"></div>
	<div id="acti5" class="acti" data-scrollTo="5"></div>
</body>

CSS

body {
	margin: 0;
	padding: 80px 0 0 0;
}
nav {
	width: 100%;
	background-color: navy;
	height: 80px;
	position: fixed;
	top:0;
}
nav ul {
	margin: 0;
	padding: 0;
}
nav ul li {
	display: inline-block;
}
.acti {
	width: 100%;
}
.acti:nth-child(odd) {
	background-color: red;
}
.acti:nth-child(even) {
	background-color: green;
}

JavaScript

var navHeight = $('nav').height();
$('.acti').height($(window).height() - navHeight);

var rmLast = parseInt($('.acti').last().attr("data-scrollTo")) - 1;

$('.acti').slice(0, rmLast).click(function(){
    var scrollTo = parseInt($(this).attr("data-scrollTo"));
    $('body, html').stop().animate({
        scrollTop: $('.acti').eq(scrollTo).offset().top - navHeight
        });
    });