Auto Scroll to Bottom DIV

17
votes

I have made chat system, but I had a problem with scrolling div for the messages that the scroll bar must be at the bottom as 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 for submit message from the input form to reload the content of the #chat-scroll and the auto scrolling is okay for submit, but when at first load of the page, the scroll only stays at the middle of the div #chat-scroll. Unlike if I submit a message it will go to the bottom when I send message.

JQuery For Scrolling

$('#chat-scroll').animate({
scrollTop: $('#chat-scroll').get(0).scrollHeight}, 2000);
2
jquerycss
can you share the demo using fiddle or codepen. - Tushar

2 Answers

33
votes

When window load scroll your chat div at bottom using document.ready

DEMO

$(document).ready(function() {
    $('#chat-scroll').animate({
        scrollTop: $('#chat-scroll').get(0).scrollHeight
    }, 2000);
});
5
votes
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;