JSFiddle - React, Tailwind, and code Playground

by thanhansoft

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div  id="data">
  asda dasdas da<br/>asd asdsaasd
  asd asdas dsadsasad</br>da dasdas da<br/>asd asdsaasd
  asd asdas dsadsasad</br>da dasdas da<br/>asd asdsaasd
  asd asdas dsda dasdas da<br/>asd asdsaasdda dasdas da<br/>asd asdsaasdda dasdas da<br/>asd asdsaasdda dasdas da<br/>asd asdsaasdda dasdas da<br/>asd asdsaasdadsasad</br>da dasdas da<br/>asd asdsaasd
  asd asdas dsadsasad</br>da dasdas da<br/>asd asdsaasd
  asd asdas dsadsasad</br>da dasdas da<br/>asd asdsada dasdas da<br/>asd asdsaasd
  asd asdas dsadsasad</br>da dasdas da<br/>asd asdsaasd
  asd asdas dsadsasad</br>da dasdas da<br/>asd asdsaasd
  asd asdas dsadsasad</br>da dasdas da<br/>asd asdsaasd
  asd asdas dsadsasad</br>da dasdas da<br/>asd asdsaasd
  asd asdas dsadsasad</br>da dasdas da<br/>asd asdsaasd
  asd asdas dsadsasad</br>  asd asdas dsadsasad</br>  asd asdas dsadsasad</br>  asd asdas dsadsasad</br>  asd asdas dsadsasad</br>  asd asdas dsadsasad</br>asd
  asd asdas dsadsasad</br>
</div>
<button>
Cuoi
</button>

CSS

#data {
    overflow-x:hidden;
    overflow-y:visible;
    height:500px;
    width:200px
}

JavaScript

$("button").click(function(){
var a = $('#data')[0].scrollHeight;
//var elem = document.getElementById('data');
 // elem.scrollTop = elem.scrollHeight;
  console.log(a);
  $("#data").animate({ scrollTop: a }, "slow");
})