JSFiddle - React, Tailwind, and code Playground

by Stephen

HTML

<section id="home" class="scroll">
  <div>
  This is the "home" section.
  </div>
</section>
<section id="pricing">
  <div>
  This is the "pricing" section.
  </div>
</section>
<section id="discord">
  <div>
  This is the "discord" section.
  </div>
</section>

CSS

#home, #pricing, #discord {
  height: 3in;
}

#home {
  background-color: lightyellow;
}

#pricing {
  background-color: lightpink;
}

#discord {
  background-color: lightgreen;
}

JavaScript

var $curr = $(".scroll");
$('body').on('wheel', function(event) {
    if (event.originalEvent.deltaY > 0) {
        $curr = $curr.nextUntil('#home');
        //debugger;
        let newhash = $curr.attr('id');
        console.log(newhash);
        window.location.hash = $($curr).attr('id');
    }
    else {
        $curr = $curr.prevUntil('#discord');
        //debugger;
        let newhash = $curr.attr('id');
        console.log(newhash);
        window.location.hash = $($curr).attr('id');
    }
});