JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<nav>
                <ul class="navigation">
                    <li class="navigation"><a class="scroll" href="#about-me">about me</a></li>
                        <li class="navigation"><a class="scroll" href="#my-skills" >my skills</a></li>
                        <li class="navigation"><a class="scroll" href="#portfolio">portfolio</a></li>
                        <li class="navigation"><a class="scroll" href="#contact">contact</a></li>    
                </ul>
            </nav>

<section id="contact2"> <!---->
    <div class="panel">
        <h2>Contact</h2>
    </div>
</section> <!---->
<section id="contact3"> <!---->
    <div class="panel">
        <h2>Contact</h2>
    </div>
</section> <!---->
<section id="contact5"> <!---->
    <div class="panel">
        <h2>Contact</h2>
    </div>
</section> <!---->
<section id="contact65"> <!---->
    <div class="panel">
        <h2>Contact</h2>
    </div>
</section> <!---->

<section id="contact7"> <!---->
    <div class="panel">
        <h2>Contact</h2>
    </div>
</section> <!---->
<section id="contact17"> <!---->
    <div class="panel">
        <h2>Contact</h2>
    </div>
</section> <!---->
<section id="contact27"> <!---->
    <div class="panel">
        <h2>Contact</h2>
    </div>
</section> <!---->
<section id="contact37"> <!---->
    <div class="panel">
        <h2>Contact</h2>
    </div>
</section> <!---->
<section id="contact47"> <!---->
    <div class="panel">
        <h2>Contact</h2>
    </div>
</section> <!---->
<section id="contact7"> <!---->
    <div class="panel">
        <h2>Contact</h2>
    </div>
</section> <!---->
<section id="contact57"> <!---->
    <div class="panel">
        <h2>Contact</h2>
    </div>
</section> <!---->
<section id="contact67"> <!---->
    <div class="panel">
        <h2>Contact</h2>
    </div>
</section> <!---->
<section id="contact"> <!---->
    <div class="panel">
        <h2>Contact</h2>
    </div>
</section> <!---->

JavaScript

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop':  $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});