JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<p id="top">top</p>

<a href="#top">go!</a>

CSS

a{display:block;margin-top:2000px;}

JavaScript

$(document).ready(function() {
  function f(string) {
    return string
      .replace(/^\//,'')  
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')  
      .replace(/\/$/,'');
  }
  $('a[href*=#]').each(function() {
    if ( f(location.pathname) == f(this.pathname)
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
      var $td = $(this.hash), $ta = $('[name=' + this.hash.slice(1) +']');
      var $t = $td.length ? $td : $ta.length ? $ta : false;
       if ($t) {
         var off = $t.offset().top;
         $(this).click(function() {
           $('html, body').animate({scrollTop: off}, 400);
           return false;
         });
      }
    }
  });
});