JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div class="container">
    <div class="content">
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
    </div>
</div>

<a href="#" id="up">Up</a>
<a href="#" id="down">down</a>

CSS

.container { height:100px; background:red; padding:0 10px; overflow:hidden; }
.content { background:#eee; }

JavaScript

$(document).ready(function() {
    
    if ($('.content').height() > $('.container').height()) {
        $("#down").hover(function () {
            animateContent("down");
        }, function() { $('.content').stop(); });
    
        $("#up").hover(function () {
            animateContent("up");
        }, function() { $('.content').stop(); });
    }
});

function animateContent(direction) {  
    var animationOffset = $('.container').height() - $('.content').height();
    if (direction == 'up') {
        animationOffset = 0;
    }
    
    $('.content').animate({ "marginTop": animationOffset + "px" }, "fast");
}