JSFiddle - React, Tailwind, and code Playground

by Mixail

HTML

<section>
    <div class="anchor" id="1st"></div>
    1st
</section>
<section>
    <div class="anchor" id="2nd"></div>
    2nd
</section>
<section>
    <div class="anchor" id="3rd"></div>
    3rd
</section>

<div class="control">
    <a href="#1st">to 1st</a>
    <a href="#2nd">to 2nd</a>
    <a href="#3rd">to 3rd</a>
    <a href="#4">to 3rd</a>
</div>

SCSS

section {
    height:500px;
    background: lightblue;
    margin: 0 0 10px;
    position: relative;
    .anchor {
        position: absolute;
        top: -10px;
    }
}

.control {
    position: fixed;
    top: 0;
    right: 0;
    a {
        display: inline-block;
        background: lightgreen;
        padding:5px 10px;
        margin-left: 5px;
    }
}

JavaScript

$document = $(document.body);

$("[href^='#']").on('click', function (e) {
    e.preventDefault();
    
    var href = $(this).attr("href"),
        hash = href.substring(href.indexOf("#")),
        $hashTarget = $(hash);
    
    if (!$hashTarget.length) {
        return false;
    }
    
    $document.animate({scrollTop:$hashTarget.offset().top});
    
});