Chatroom scroll down after get new message

See more:

Javascript

PHP

Ajax

jQuery

Chat

I'm stuck in this project.
How do I scroll down the chat room height after a new message?
I've tried a lot of code but, I failed to get the right code.

I upload an video for watch the problem

i hope you understand it now

What I have tried:

<div class="col-lg-9 col-xl-10">
<div id="boxz" class="chat-box scrollable position-relative">
<!--chat Row -->

<ul class="chat-list list-style-none px-3 pt-3" id="mds">


</ul>

</div>


<div class="card-body border-top chat-box">
<div class="row">
<div class="col">
<div class="input-field mt-0 mb-0">

<form id="chatroom" enctype="multipart/form-data">
<div class="fas fa-paperclip"></div>
<div class="fas fa-microphone record"></div>
<div class="input-group">
<textarea class="form-control" name="mgs" id="messages"
placeholder="Type and enter"></textarea>
<div class="input-group-prepend">
<span class="input-group-text">
<a class="btn-circle btn-lg btn-cyan float-right text-white"
href="javascript:void(0)" id="btn_chat"><i
class="fas fa-paper-plane"></i></a>
</span>
</div>
</div>
<input type="file" name="images[]" id="images"
style="display:none"
accept="image/x-png,image/gif,image/jpeg" multiple />
<input type="hidden" id="client_ids" name="client_ids">
</form>

</div>
</div>

</div>
</div>





/**************** Update All chatbox and Right ********************** */
setInterval(() => {

/** Collect Client Chat data */
var id = $('#client_ids').val();
userid(id);

/*** Right Side Client Area */
UpdateList();

}, 3000); /*** setInterval function */


/****** Chatbox Right Side bar *******/
function UpdateList() {
$('#rightsidebar').load('./core/right_side').fadeIn('slow');
}
/******************************************/


/****** Fetch Client chat data by click client name */
function userid(id) {
$('#client_ids').val(id);
$.get("./core/chat_fetch", {
client_code: id
}, function(data) {
$('.chat-list').html(data);
$(".chat-box").animate({
scrollTop: $(".chat-box")[0].scrollHeight
}, 0);
});
}
/*******************************************/



$(document).ready(function() {
UpdateList();
$("#messages").emojioneArea({
pickerPosition: "top",
tonesStyle: "bullet",
events: {
keyup: function(editor, event) {
// console.log(editor.html());
// console.log(this.getText());
// $('#gts').html(editor.html());
}
}

});
});