JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <ul class="nav">
        <li>
            <a href="#id1">id1</a>
        </li>
        <li>
            <a href="#id2">id2</a>
        </li>
        <li>
            <a href="#id3">id3</a>
        </li>
        <li>
            <a href="#id4">id4</a>
        </li>
    </ul>
    <p>Lorem ipsum dolor sit amet consectetuer nulla eros a Nam ut. A wisi Phasellus nulla porttitor semper id et facilisis sapien Nullam. Leo lobortis condimentum sit In quis et ligula id Suspendisse Sed. Orci gravida Integer pede enim metus nibh nec cursus vitae a. Pellentesque Pellentesque eget Aliquam dictum wisi tristique ligula massa id diam. Ante convallis Aenean Nam at ac urna libero a eleifend facilisis. Nunc condimentum massa venenatis orci mauris elit faucibus pellentesque vel leo. Hendrerit lorem gravida eros orci Aenean nascetur Vestibulum sed nibh sed. A id libero nec Cras Pellentesque dui tincidunt eu tincidunt nulla. Pretium condimentum Proin Aenean at tincidunt urna senectus Lorem enim Nunc. Magnis facilisi Vestibulum turpis gravida id id lacus pulvinar tempor nulla. Aenean neque velit vitae dapibus elit In consequat ultrices enim vestibulum. Sed risus nibh nulla massa egestas.</p>
    <div id="id1">1</div>
    <p>Justo convallis convallis suscipit sem mus ipsum id Sed dui Donec. Pede Nam pede semper congue quis sit ullamcorper eu a nec. Tincidunt odio ligula dis consectetuer est Pellentesque pede elit dui lacus. Porttitor dictum orci eu amet Nullam eu neque vitae consectetuer semper. Accumsan facilisi leo accumsan Nam laoreet ut parturient ut ipsum tempus. Et faucibus molestie orci fringilla leo enim pellentesque laoreet pretium nec. Sed metus magna Integer ut tempus elit ut nibh congue consequat. Tristique eget Ut mauris consequat Donec vel Morbi orci et ac. Sem elit eu Sed vitae hendrerit orci nulla Curabitur ornare Integer. Orci elit id justo Maecenas ac leo.</p>
    <p>Elit Sed In cursus eleifend Suspendisse nisl ac gravida et pellentesque. Lacinia...

JavaScript

jQuery(function() {
    var scrollDuration = 400;
    jQuery('.nav a').each(function() {
        var btn = jQuery(this);
        var target = jQuery(this.hash);
        
        if(target.length) {
            btn.click(function() {
                jQuery.scrollTo(this.hash, scrollDuration)
                return false;
            })
        }
    })
})
/**
 * jQuery.ScrollTo - Easy element scrolling using jQuery.
 * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
 * Dual licensed under MIT and GPL.
 * Date: 5/25/2009
 * @author Ariel Flesler
 * @version 1.4.2
 *
 * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
 */
;(function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var...