JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<div id="chatbox"> 
    Chat Start
  <p>GMK: Hello</p><p>Test 1</p><p>Test 2</p><p>Test 3</p><p>Test 4</p>
    <p>Test 5</p><p>Test 6</p><p>Test 7</p><p>Test 8</p><p>Test 9</p><p>Test 10</p>
    <p>Test 11</p>
    <span id="end_chat0">End Chat</span> 
</div>


<br /><br /><br /><br /><br />
    <input type="button" id="body_end" value="Click Me">

CSS

#chatbox {
		height: 200px;
		overflow-y: scroll;
		border: 1px solid red;
	}

JavaScript

$("#body_end").click(function(){
    
    var id = 0;

var scrollTop = $('#end_chat' + id).offset().top;

$('#chatbox').attr('scrollTop', scrollTop);

    alert("Finished animating");

});