JSFiddle - React, Tailwind, and code Playground

by Miguel Roman

HTML

<div class="menu">
<ul>
<li><a href="#div-a" onclick="window.scroll(event, this.href)">A</a></li>
<li><a href="#div-b" onclick="window.scroll(event, this.href)">B</a></li>
<li><a href="#div-c" onclick="window.scroll(event, this.href)">C</a></li>
</ul>
</div>
<h1>A</h1>
<div id="div-a">
<p>
ALorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet facilisis sem. Proin dignissim lacus ac ornare tincidunt. Quisque rutrum fermentum leo eu consequat. Vivamus est magna, dapibus quis metus nec, lobortis aliquet justo. In convallis est mi, eu accumsan odio tincidunt suscipit. Donec pellentesque enim et velit rhoncus fermentum. Mauris elit tellus, blandit vel velit et, rutrum placerat diam. Sed eget leo non libero condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p>
Ut vitae ipsum orci. Sed feugiat urna non suscipit pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin eu mauris lorem. Quisque pharetra tortor et nibh placerat, a scelerisque ante varius. Praesent sed tellus posuere, placerat nibh nec, sagittis velit. Mauris non porta leo. Nunc nec mi eget leo elementum finibus non sit amet risus. Ut ac placerat mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec gravida tincidunt nulla eu convallis. Aenean convallis quis dolor nec sollicitudin. Phasellus tempor dapibus blandit. Duis tincidunt lorem convallis ligula auctor commodo. Phasellus sit amet tincidunt dolor, nec bibendum tellus.
</p>
<p>
Sed hendrerit nulla in convallis maximus. Aenean finibus congue tellus, et accumsan erat ornare sed. In placerat tellus odio, non pulvinar turpis lacinia et. Nulla ullamcorper, nisi ut tempus malesuada, nisl erat rhoncus mi, vitae scelerisque urna neque sit amet tellus. Donec ut sapien lacinia orci fermentum blandit sed eu sapien. Nullam mollis sollicitudin est quis facilisis. Quisque pulvinar sagittis diam, sit amet...

CSS

.menu {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
}

.menu ul li {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  list-style: none;
}

.menu ul li a {
  color: white;
}

body {
  padding-top: 40px;
}

JavaScript

window.scroll = function (event, elementId) {
	event.preventDefault();
	var id = elementId.substring(elementId.lastIndexOf('#') + 1);
  document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
}