JSFiddle - React, Tailwind, and code Playground

by forresto

HTML

Smooth scroll, set hash, no jump.

<div id="one"><a href="#two">one</a></div>
<div id="two"><a href="#three">two</a></div>
<div id="three"><a href="#four">three</a></div>
<div id="four"><a href="#five">four</a></div>
<div id="five"><a href="#six">five</a></div>
<div id="six"><a href="#one">six</a></div>

CSS

div:nth-child(even) {
    background: black;
    color: white;
}
div:nth-child(odd) {
    background: white;
    color: black;
}
a {
    display: block;
    padding: 300px 100px;
    color: #666;
}

JavaScript

$('a[href*=#]').click(function(event){
        event.preventDefault();
        var link = $(event.target);
        var href = link.attr("href");
        $("html,body").stop().animate(
          { scrollTop: $(href).offset().top }, 
          1000, 
          function(){
            smooth = false;
            window.location.hash = href;
          }
        );
      });