JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <a href="#block1"> Block 1 </a>
    <a href="#block2"> Block 2 </a>
    <a href="#block3"> Block 3 </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>
<div id="propertise">
<span>CurrentId = </span><span class="currElem">_</span><br>
<span>height = </span><span class="height">_</span><br>
<span>top = </span><span class="top">_</span><br>
<span>scroll = </span><span class="scroll">_</span><br>
<span>bottom = </span><span class="bottom">_</span><br>
</div>
</div>

CSS

body {
 height:2510px;
}

section#block1{
  height: 700px;
    background: #F05222;
}
section#block2{
  height: 700px;
    background: #7CBA01;
}
section#block3{
  height: 700px;
    background: #00A6F0;
}
section#block4{
    height: 100px;
    background: #ddd;
}
nav{
    position: fixed;
    right:20px;
    top: 20px;
    padding: 10px;
    border-radius: 5px;
    background: #ededed;
}
a{
    display: block;
    color:blue;
}
a:visited{
    display: block;
    color:blue;
}
a.active{
    color: #f95;
}

#propertise {
  position:fixed;
  bottom:0;
  right:0;
  background-color:white;
}

JavaScript

jQuery(window).scroll(function(){
         var $sections = $('section');
         var scroll = $(window).scrollTop();
         $('#propertise .scroll').html(scroll);
				$sections.each(function(i,el){
        var top  = $(el).offset().top-100;
        var bottom = top +$(el).height();
       // var scroll = $(window).scrollTop();
        var id = $(el).attr('id');
        //$('#propertise .currElem').html(id);

      if( scroll > top && scroll < bottom){
      $('a.active').removeClass('active');
			$('a[href="#'+id+'"]').addClass('active');
       $('#propertise .currElem').html(id);
      $('#propertise .top').html(top);
			$('#propertise .height').html($(el).height());
      $('#propertise .bottom').html(bottom);
        }

    })
 });
   
$("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);
    });