JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<h1 id="top">Top</h1>
<a href="#1" data-scrollto-link>Scroll to heading 1</a>
<a href="#2" data-scrollto-link>Scroll to heading 2</a>
<a href="#3" data-scrollto-link>Scroll to heading 3</a>
<a href="#4" data-scrollto-link>Scroll to heading 4</a>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1 id="1">Heading 1</h1>
<a href="#top">Back to top</a>
<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>
<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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2 id="2">Heading 2</h2>
<a href="#top">Back to top</a>
<br>
<br>
<br>
<br>
<br>
<h3 id="3">Heading 3</h3>
<a href="#top">Back to...

JavaScript

$("a[href^='#']").on("click", function(e) {
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
});