JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li><a href="#section2">Go to Section 2</a></li>
    <li><a href="#section3">Go to Section 3</a></li>
    <li><a href="#section4">Go to Section 4</a></li>
    <li><a href="#section5">Go to Section 5</a></li>
    <li><a href="#section6">Go to Section 6</a></li>
    <li><a href="#section7">Go to Section 7</a></li>
</ul>
    
<div id="wrapper">
    <div id="section1" class="section">
        Section 1 - default section when a link isn't hovered.
    </div>
    <div id="section2" class="section">
        Section 2
    </div>
    <div id="section3" class="section">
        Section 3
    </div>
    <div id="section4" class="section">
        Section 4
    </div>
    <div id="section5" class="section">
        Section 5
    </div>
    <div id="section6" class="section">
        Section 6
    </div>
    <div id="section7" class="section">
        Section 7
    </div>
</div>

CSS

#nav{
    margin: 10px;
    padding: 0; 
    clear: both;
}

#nav li{
    list-style-type: none;
}

#nav li a:hover{
    background: blue;
    color: #fff;
}

#wrapper{
    width: 400px;
    height: 200px;
    overflow: scroll;
    border: 1px solid black;
}

.section{
    width: 400px;
    height: 200px;
    color: white;
}

#section1{ background: blue; }
#section2{ background: red; }
#section3{ background: green }
#section4{ background: orange }
#section5{ background: yellow }
#section6{ background: black; }
#section7{ background: gold; }

JavaScript

jQuery( "#nav").delegate( "a", "mouseenter mouseleave", function(e){
var i, self = this, pos;
    
    if( e.type == "mouseleave" ) {
     i = 0;   
    }
    
    else {
    //Find out the index of the a that was hovered
    jQuery( "#nav a").each( function( index ) {
       
        if( self === this ) {
         i = index + 1;
         return false;
        }
        
    });
    }
  
    //Find out if the index is a valid number
    if( i >= 0 ) {
    
                         //stop the previous animation, otherwise it will be queued
        jQuery( "#wrapper").stop().animate( { scrollTop: i * 200 }, 500 );
        //I would retrieve .offsetTop, but it was reporting false values :/
        
    }
e.preventDefault();
});