JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>test test test test test test test test test test test test test test </p>
</div>

CSS

p {
    background-color: cyan; 
    padding: 10px;
    width: 100px;
    height: 20px;
    overflow-y: hidden;
}

JavaScript

$(function(){
    var obj = $("p")[0];
    obj.scrollTop = obj.scrollHeight;
});


$("div").click(function(){
    // Animate 'scrollTop'
    $("p").animate({scrollTop: 0}, 1000);
    
    // Abort the animation by removing the element
    setTimeout(function(){
        $("div").html("<p>A new p!</p>");
    }, 500);
});