JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"></script>
<nav>
<a href="#block1"> Block 1 </a>
<a href="#block2"> Block 2 </a>
<a href="#block3" class=""> Block3 </a>
<a href="#block4"> Block 4 </a>
</nav>
<div>
<section id="block1" class="nav">block 1</section>
<section id="block2" class="nav">block 2</section>
<section id="block3" class="nav">block 3</section>
<section id="block4" class="nav">block 4</section>
</div>
CSS
section#block1 {
height: 700px;
background: #F05222;
}
section#block2 {
height: 700px;
background: #7CBA01;
}
section#block3 {
height: 700px;
background: #00A6F0;
}
section#block4 {
background: #FFB901;
height: 100px;
}
nav {
position: fixed;
right: 20px;
top: 20px;
padding: 10px;
border-radius: 5px;
background: #ededed;
}
a {
display: block;
}
.active {
color: #f95;
}
JavaScript
var $sections = $('section');
var documentHeight = $(document).height();
var windowHeight = $(window).height();
onScroll();
jQuery(window).scroll(onScroll);
function onScroll(event) {
var scroll = $(window).scrollTop();
if (scroll + windowHeight === documentHeight) {
$('a.active').removeClass('active');
$('nav a').last().addClass('active');
}
else {
$sections.each(function(i, el) {
var top = $(el).offset().top - 100;
var bottom = top + $(el).height();
if (scroll > top && scroll < bottom) {
var id = $(el).attr('id');
$('a.active').removeClass('active');
$('a[href="#' + id + '"]').addClass('active');
}
})
}
}
$("nav").on("click", "a", function(event) {
// исключаем стандартную реакцию браузера
event.preventDefault();
// получем идентификатор блока из атрибута href
var id = $(this).attr('href'),
// находим высоту, на которой расположен блок
top = $(id).offset().top;
// анимируем переход к блоку, время: 800 мс
$('body,html').animate({
scrollTop: top
}, 800);
});