JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#fn:1">Go to Footn</a>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<div id="fn:1"> Lorem ipsum Bla Bla </div>

JavaScript

var $root = $('html, body');
  $('a').click(function() {
    var href = $.attr(this, 'href'),
        href = href.split(':'),
        href = href.join('\\:');
      alert(href)
    $root.animate({
        scrollTop: $(href).offset().top
    }, 400, function () {
        window.location.hash = href;
    });
    return false;
});