JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Заголовок 1</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum consequat maximus. Pellentesque feugiat, nisl eget ornare lobortis, sem nisi maximus nisl, ultricies dapibus turpis odio id magna.
<h2>Заголовок 2</h2> Donec condimentum mauris nunc. Integer non mi at nunc imperdiet bibendum ac et sapien. Donec porta rhoncus nibh, eget egestas dui.
<h2>Заголовок 3</h2> Praesent dui nisl, molestie quis tellus sit amet, ullamcorper consectetur odio. Pellente bibendum ac et sapien. Donec porta rhoncus nibh, eget egestas dui.
<h2>Заголовок 4</h2> Praesent dui nisl, molestie quis tellus sit amet, ullamcorper consectetur odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. bibendum ac et sapien. Donec porta rhoncus nibh, eget egestas dui.
<h2>Заголовок 5</h2> Praesent dui nisl, molestie quis tellus sit amet, ullamcorper consectetur odio. Pellente bibendum ac et sapien. Donec porta rhoncus nibh, eget egestas dui.
<h2>Заголовок 6</h2> Praesent dui nisl, molestie quis tellus sit amet, ullamcorper consectetur odio. Pellente

CSS

#nav {
  border: 1px solid black;
  padding: 15px;
  box-sizing: border-box;
}

li {
  cursor: default;
  color: blue;
}

li:hover {
  text-decoration: underline;
}

JavaScript

function scrollto(e) {
  $(document).scrollTop($('h2').eq($(e).attr('n')).offset().top);
}
$(() => {
  $('body').prepend('<div id="nav"><ul></ul></div>');
  for (let i = 0, j = $('h2').length; i < j; i++) {
    $('#nav ul').append(`<li>${$('h2').eq(i).html()}</li>`);
    $('#nav li').eq(i).attr('n', i).attr('onclick', 'scrollto(this)');
  }
})