JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<a href="#age-1">1</a>
<a href="#age-2">2</a>
<a href="#age-3">3</a>
<a href="#age-4">4</a>

<div id="age-1" style="background: red;"></div>
<div id="age-2" style="background: blue;"></div>
<div id="age-3" style="background: yellow;"></div>
<div id="age-4" style="background: green;"></div>

CSS

div {
  width: 100%;
  height: 100vh;
}

JavaScript

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});