Auto Scroll to Bottom DIV

Question

I created a chat system, but I had a problem scrolling the div for messages saying that the scroll bar should be at the bottom by default.

Div

<div class="chat-body chat-scroll" id="chat-scroll"></div> 

STYLE

 .chat-scroll{position: absolute; top:0px; bottom: 0px; overflow-y: auto;} 

I use jQuery to send a message from the input form to reload the contents of # chat-scroll and automatic scrolling is suitable for sending, but the first time the page loads, the scrolling remains only in the middle of the scroll # div. Unlike if I send a message, it will go to the bottom when I send a message.

JQuery to scroll

 $('#chat-scroll').animate({ scrollTop: $('#chat-scroll').get(0).scrollHeight}, 2000); 

Answer 1

When window loading scrolls your chat div at the bottom using document.ready

Demo

 $(document).ready(function(){ $('#chat-scroll').animate({ scrollTop: $('#chat-scroll').get(0).scrollHeight}, 2000); }); 

Answer 2

 var objDiv = document.getElementById("your_div"); objDiv.scrollTop = objDiv.scrollHeight;