JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<div id="mydiv">
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/><br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/><br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
  </div>

CSS

.main{
  height:100px;
}
#mydiv {
  height: 500px;
 width:300px;
  background: yellow;
  overflow-y: auto;
}

JavaScript

$(document).ready(function(){
    $('#mydiv').animate({
        scrollTop: $('#mydiv')[0].scrollHeight}, 0);
});