How to let my overflow div scroll always at bottom?

Question

I have used

$('.chatroom-upper-container').scrollTop($('.chatroom-upper-container')[0].scrollHeight);

it only work when i send a new message the scroll will update to bottom but how do when load the page the div scroll will always go down?

https://jsfiddle.net/729jz8me/

Everthing is work fine in JsFiddle

but in my page the scroll wont go to bottom when loaded the page here is my page

the scroll will go down when i send a new message so how do i make the page loaded the scroll will go to bottom?

EDIT Maybe i didn't state the question very clearly. So what i want is when i open the page the scroll will be at the bottom. Now I can go to bottom of the page when i send new message but when i close it reopen again the scroll of the page will be top again. I no sure why my code didn't work on page only work in JsFiddle

Answer 1

Can you please try following jQuery code :-

$(document).ready(function(){
   setTimeout(function(){
      $('.chatroom-upper-container').scrollTop($('.chatroom-upper-container')[0].scrollHeight);
   }, 500);
});

It may help you.

Answer 2

We can combine my idea with yours:

• Start the list at the bottom with your code

• Create a button to trigger an event, when the user click the button, the scroll get to the bottom.

So, thus when we started the page the first time, the list will be at the bottom, then when you send a message the list will be in bottom too.

$(document).ready(function(){
   //When page is loaded the first time
   $('.chatroom-upper-container').scrollTop($('.chatroom-upper-container')[0].scrollHeight);
   //Thus when page is loaded, the list started at the top 
   $('.YourSendButton').click(function(){
       $('.chatroom-upper-container').scrollTop($('.chatroom-upper-container')[0].scrollHeight);
   });  
});