JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

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="sections">
        <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>
</div>

CSS

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

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

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

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

.section{
    position:relative;
    width: 400px;
    height: 200px;
    color: white;
}
#sections{
    position:absolute;
    top:0px;
}
#section1{ background: blue; }
#section2{ background: red; }
#section3{ background: green; }
#section4{ background: orange; }
#section5{ background: gray; }
#section6{ background: black; }
#section7{ background: gold; }

JavaScript

var flag = false,
    goto = 0,
    hre; 

    $('#nav li a').bind('mouseenter mouseleave', function(e) {
        if (e.type === 'mouseenter') {
           flag = true;
           hre = $(this).attr('href');
           goto = $(hre).position().top;
           $('#sections').stop().animate({top : '-'+goto },800);  
        } else {
           flag = false;
            
            setTimeout(function() { 
               if( flag != true ){
                  $('#sections').stop().animate({top : '0' },800);  
               }      
            }, 1000);  
        }
    });

$('#sections').mouseenter(function(){
   flag = true; 
});