JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="side-nav">
       <li><div id="appetizer2"><a href="#appetizer"><h3>appetizers</h3></a></div>
</li>


        <li><div id="soupmenu"><a href="#soup"><h3>soups &amp; side salads</h3> </a>
</div>
</li>
        <li><div id="sidemenu"><a href="#side"><h3>sides</h3></a>
</div>
</li>
        <li><div id="housemenu"><a href="#house"><h3>house specialties</h3></a>
</div>
</li>
        <li><div id="pizzamenu"><a href="#pizza"><h3>pizza @ select locations</h3></a>
</div>
</li>
        <li><div id="classicmenu"><a href="#classic"><h3>classics</h3></a>
</div>
</li>
        <li><div id="appetizermenu"><a href="#dessert"><h3>desserts</h3></a>
</div>
</li>
        <li><div id="drinkmenu"><a href="#drink"><h3>drinks &amp; coffee</h3></a>
</div>
</li>
      </ul>
   <div id="appetizer"> <div class="large-9 push-3 columns">
      <div class="panel">
     <h2><a style="color: #fff">
<div class="menutitle">
<img src="/system/images/W1siZiIsIjIwMTMvMDUvMDEvMTNfMTZfMDlfMzkxX2FwcGV0aXplcnMucG5nIl1d/appetizers.png" />
</div>

</a>
</h2>  
    
  <div class="appetizer"> 
 <div class="large-4 columns">
                <h5>bruschetta </h5>
<h6 class="subheader">grilled rustic bread with tomatoes, fresh basil, garlic, extra virgin olive oil and salsa verde 
               <br /> Regular: (695 cal)<br /> Small: (426 cal v)</h6>
       </div>
            
 
            <div class="large-4 columns">
                <h5>gamberi</h5>
                <h6 class="subheader">gulf shrimp sautéed in an iron skillet with tomato, garlic and chili, served with grilled bread<br />
(557 cal)</h6>

            </div>
 
            <div class="large-4 columns">
                <h5>caprese</h5>
                <h6 class="subheader"> local tomatoes layered with fresh Belgioso mozzarella, fresh basil and a balsamic reduction<br />
Regular: (808 cal v) <br />Small: (517 cal v)
 </h6>
              
            </div>
 
            <div class="large-4 columns">
                <h5>cozze | vongole</h5>
...

JavaScript

jQuery(document).ready(function($){
    var prevScrollTop = 0;
    var $scrollDiv    = jQuery('div#container');
    var $currentDiv   = $scrollDiv.children('div:first-child');

    var $sectionid    = 1;
    var $numsections  = 5;

    $scrollDiv.scroll(function(eventObj)
    {
        var curScrollTop = $scrollDiv.scrollTop();
        if (prevScrollTop < curScrollTop)
        {
        // Scrolling down:
            if ($sectionid+1 > $numsections) {
                console.log("End Panel Reached");
            }
            else {
                $currentDiv = $currentDiv.next().scrollTo();
                console.log("down");
                console.log($currentDiv);
                $sectionid=$sectionid+1;
                console.log($currentDiv.attr('id'));
                var divid =$currentDiv.attr('id');
                jQuery('html, body').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow');
                }
        }
        else if (prevScrollTop > curScrollTop)
        {
        // Scrolling up:
            if ($sectionid-1 == 0) {
                console.log("Top Panel Reached");
            }
            else {
                $currentDiv = $currentDiv.prev().scrollTo();
                console.log("up");
                console.log($currentDiv);
                $sectionid=$sectionid-1;
                var divid =$currentDiv.attr('id');
                jQuery('html, body').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow');

                }
        }
        prevScrollTop = curScrollTop;
    });
});