JSFiddle - React, Tailwind, and code Playground

scroll go to

by oktaviardi pratama

HTML

<a href="#test1" class="smoothscroll">Testing #1</a>
<a href="#test2" class="smoothscroll">Testing #2</a>
<a href="#test3" class="smoothscroll">Testing #3</a>
<a href="#test4" class="smoothscroll">Testing #4</a>

<div class="anchor" id="test1"></div>
<div class="anchor" id="test2"></div>
<div class="anchor" id="test3"></div>
<div class="anchor" id="test4"></div>

CSS

body {
    font-family: sans-serif;
    padding: 10px;
}

a {
    display: block;
}

.anchor {
    background-color: #eee;
    height: 500px;
    margin-top: 20px;
}

JavaScript

$(document).ready(function($) {
    $('a[href^="#"]').bind('click.smoothscroll', function(e) {
        e.preventDefault();
        
        // Get the current target hash
        var target = this.hash;
        
        // Animate the scroll bar action so its smooth instead of a hard jump
        $('html, body').stop().animate({
            'scrollTop' : $(target).offset().top
        }, 900, 'swing', function() {
            window.location.hash = target;
        });
    });
});