JSFiddle - React, Tailwind, and code Playground

by Danja Wittmann

HTML

<div class="fix">
   <a href="#a1">К заголовку A1</a>
   <a href="#a2">К заголовку A2</a>
   <a href="#a3">К заголовку A3</a>
   <a href="#a4">К заголовку A4</a>
</div>
<div class="layer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget magna id dolor gravida aliquet eu ut turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas lacinia ante eget magna aliquet maximus. Maecenas id libero quis nulla
    pellentesque iaculis. Suspendisse sit amet sodales neque. Fusce fringilla venenatis rutrum. Nunc metus ex, viverra vel bibendum id, blandit non eros. Fusce et libero non mauris vestibulum sagittis in eu neque. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Donec leo sapien, ultrices interdum ex at, dapibus rutrum ligula. Curabitur at dui eu tortor hendrerit faucibus non vel lectus. Sed augue odio, efficitur sit amet pulvinar vel, rutrum sit amet eros. Nunc magna augue, accumsan nec
    tortor in, consequat tempus lorem. Donec et tempus sem, vitae posuere justo. Etiam facilisis luctus justo sit amet convallis. Morbi in ipsum id libero placerat feugiat vel et nunc. Aliquam suscipit nunc ut dignissim vestibulum. Fusce efficitur eget
    quam sed finibus. Duis tristique a purus ac finibus. Cras accumsan, risus a egestas consectetur, ex risus commodo lectus, quis finibus odio sapien vel turpis. Duis scelerisque iaculis velit, eu vehicula ante congue a. Aenean feugiat mattis neque in
    efficitur. Etiam mollis hendrerit velit, ut porta lectus euismod eget. Integer sed tempor tellus. Nam mi mauris, ultrices quis lorem ut, sollicitudin interdum elit. Aliquam elementum vehicula augue, rhoncus interdum arcu pharetra eget. Integer a finibus
    magna. Etiam pulvinar nisi porta felis tincidunt, in maximus massa vestibulum. Morbi ac ex nibh. Aenean quis tellus eu odio ullamcorper elementum at et tortor. Mauris scelerisque commodo sapien eget mattis. Proin vel tincidunt lectus, eget ornare
    <h1 font="bold 14px"...

CSS

.layer h1[id]:before {    /*-- По сути мы добавляем небольшой отступ к кажому подзаголовку чтобы страницу скролило к начлу отступа--*/
  content: "";
  display: block;
  height: 20px; /*-- Тут указать высоту вашего плавующего меню --*/
  width: 1px;
  background: transparent;
}
.fix {
  height: 20px;
  width: 100%;
  top: 0;
  background: black;
  position: fixed;
}
.layer {
  margin-top: 50px;
}