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

$('document').ready(function () {
    var h = $(window).height();
    $('div').height(h);

    window.location.hash = 'anchor1';

    $('a').click(function (e) {
        e.preventDefault(); 
        
        var hash = window.location.hash,
            st = $(window).scrollTop();
            $next = $(hash).next('div');
        
        if ($next.length) {
            var id = $next.attr('id'),
                nextOffsetTop = $next.offset().top;

            history.pushState({state:id}, id, '#'+id);
            $('body, html').animate({
                scrollTop: nextOffsetTop - 105
            }, 'slow');      
        } else {
            var first = 'anchor1';
            
            history.pushState({state:first}, first, '#'+first);
            $('body, html').animate({
                scrollTop: $('#'+first).offset().top
            }, 'slow');
            
        }

    });
})