JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">GO TO NEXT</a>

<div id="anchor1">1</div>
<div id="anchor2">2</div>
<div id="anchor3">3</div>
<div id="anchor4">4</div>
<div id="anchor5">5</div>
<div id="anchor6">6</div>

CSS

* {
    margin:0;
    padding:0;
}
a {
    position:fixed;
    top:105px;
}
div {
    height:200px;
    text-align:center;
}

JavaScript

//setting a hash does not work on jsfiddle but I want to show how the scrolling works;
$('document').ready(function () {
    var h = $(window).height();
    $('div').height(h);

    //on DOM ready change location.hash to 'anchor1'
    window.location.hash = 'anchor1';
    //GO TO NEXT click event:
    $('a').click(function (e) {
        //preventing the default <a> click (href="#")
        e.preventDefault();
        //get the current hash to determine the current <div> id 
        var hash = window.location.hash,
            //find the (next) immediate following sibling of the current <div>
            $next = $(hash).next('div');
        //check if this next <div> sibling exist
        if ($next.length) {
            var id = $next.attr('id'),
                nextOffsetTop = $next.offset().top;
            //animate scrolling and set the new hash
            $('body, html').animate({
                scrollTop: nextOffsetTop - 105
            }, 'slow');
            window.location.hash = id;
        } else {
            //else if the next <div> sibling does not exist move to the first anchor
            var first = '#anchor1';
            $('body, html').animate({
                scrollTop: $(first).offset().top
            }, 'slow');
            window.location.hash = first;
        }

    });
})