JSFiddle - React, Tailwind, and code Playground

by Sergey Goryachev

HTML

<nav class="mainmenu">
	<a href="#block1">block1</a>
	<a href="#block2">block2</a>
	<a href="#block3">block3</a>
	<a href="#block4">block3</a>
	<a href="#block5">block3</a>
</nav>
<div class="block block1" id="block1"></div>
<div class="block block2" id="block2"></div>
<div class="block block3" id="block3"></div>
<div class="block block4" id="block4"></div>
<div class="block block5" id="block5"></div>

CSS

* {
	margin: 0; padding: 0;
}
nav {
	position: fixed;
	background: white;
	width: 100%;
	line-height: 50px;
}
.block {
	height: 1000px;
}
.block1 {
	background: red;
}
.block2 {
	background: green;
}
.block3 {
	background: blue;
}
.block4 {
	background: yellow;
}
.block5 {
	background: magenta;
}

JavaScript

$('nav.mainmenu a').bind("click", function(e) {
    var anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $(anchor.attr('href')).offset().top
    }, 1000);
    e.preventDefault();
});