JSFiddle - React, Tailwind, and code Playground

by Yerko Palma

HTML

<nav>
  <a href="#section-one">section one</a>
  <a href="#section-two">section two</a>
</nav>
<p id="section-one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue interdum lorem at elementum. Pellentesque tristique leo purus, sit amet tempor diam ornare et. Nullam tincidunt ullamcorper bibendum. Vestibulum eget faucibus odio. Morbi id auctor nulla, eget pretium dolor. Praesent sit amet odio eu tellus laoreet vehicula ornare a odio. Phasellus ac faucibus velit, at gravida velit. Quisque at neque ut lorem finibus efficitur. Fusce blandit lorem mauris, nec blandit mi tristique a. Pellentesque ac risus porttitor, auctor turpis eu, mattis erat. Nunc efficitur ipsum quis orci tristique sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a convallis libero. Integer a tempor felis.</p>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<p id="section-two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue interdum lorem at elementum. Pellentesque tristique leo purus, sit amet tempor diam ornare et. Nullam tincidunt ullamcorper bibendum. Vestibulum eget faucibus odio. Morbi id auctor nulla, eget pretium dolor. Praesent sit amet odio eu tellus laoreet vehicula ornare a odio. Phasellus ac faucibus velit, at gravida velit. Quisque at neque ut lorem finibus efficitur. Fusce blandit lorem mauris, nec blandit mi tristique a. Pellentesque ac risus porttitor, auctor turpis eu, mattis erat. Nunc efficitur ipsum quis orci tristique sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a convallis libero. Integer a tempor felis.</p>

CSS

nav {
  position: fixed;
  top: 10px;
}
p {
  padding-top: 50px;
}

JavaScript

var links = document.querySelectorAll('a')

Array.prototype.forEach.call(links, function (link) {
  link.addEventListener('click', function (e) {
    e.preventDefault()
    console.log(link.href)  
      
  })
})