JSFiddle - React, Tailwind, and code Playground

by Sanal S

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div class="container">
  <div class="static_data">some static data</div>
  <div class="data_container">
    some text here
    <br>
    <br> some text here
    <br>
    <br> some text here
    <br>
    <br> some text here
    <br>
    <br> some text here
    <br>
    <br> some text here
    <br>
    <br> some text here
    <br>
    <br> some text here
    <br>
    <br> some texthere
    <br>
    <br> some text here
    <br>
    <br>some text here
    <br>
    <br> some texthere
    <br>
    <br>
  </div>
</div>
<div class="click">load data</div>

CSS

.container {
  width: 500px;
  height: 200px;
  background: #ddd;
  overflow-y: auto;
}

.click {
  background: red;
  width: 100px;
  color: #fff;
  padding: 5px;
}

JavaScript

$(document).ready(function() {
  $(".click").on('click', function() {
    var new_data = "new data<br><br>new data<br><br>new data<br><br>new data<br><br>new data<br><br>new data<br><br>new data<br><br>new data<br><br>new data<br><br>new data<br><br>new data<br><br>new data<br><br>";
    $(".data_container").html(new_data);
    $(".container").scrollTop( 0 );// scroll to top
  })
})