JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<div id="fff" style="">
    <div class='item'>A</div>
    <div class='item'>B</div>
    <div class='item'>C</div>
    <div class='item'>D</div>
    <div class='item'>E</div>
    <div class='item'>F</div>
    <div class='item'>A</div>
    <div class='item'>B</div>
    <div class='item'>C</div>
    <div class='item'>D</div>
    <div class='item'>E</div>
    <div class='item'>F</div>
</div>

CSS

.item {
    background-color:lightyellow;
    display:block;
    height:20px;
    width:90%;
    margin-top:5px;
    padding:2px
}
#fff {
    overflow-x: hidden;
    overflow-y: scroll;
    width: 200px;
    height: 100px;
    
    border:1px solid red;
}

JavaScript

jQuery("#fff").animate({
    scrollTop: 10
}, '500', 'swing', function () {
    jQuery(this).animate({
        scrollTop: 0
    }, '100', 'swing', function () {});
});