JSFiddle - React, Tailwind, and code Playground

by Tyler N.

HTML

<ul class="pager">
    <li class="nav-slide-1 skrollable skrollable-after">Nav Slide One</li>
    <li class="nav-slide-2 skrollable skrollable-between">Nav Slide One</li>
    <li class="nav-slide-3 skrollable skrollable-between">Nav Slide One</li>
    <li class="nav-slide-4 skrollable skrollable-after">Nav Slide One</li>
</ul>

<div class="slide-1">Slide One Content!</div>
<div class="slide-2">Slide One Content!</div>
<div class="slide-3">Slide One Content!</div>
<div class="slide-4">Slide One Content!</div>

JavaScript

$(function() {
    
    $('.pager li').click(function() {
    var t = $(this).attr('class').replace('nav-', '')
    							.replace('', '')
    							.replace('skrollable-after', '')
    							.replace('skrollable-between', '');
    var navScroll = $('.' + t).offset();
    var destination = navScroll.top;

    $('body, html').animate({ scrollTop: destination });
  });
});