18

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);
omma2289
  • 54,161
  • 8
  • 64
  • 68
DUDEZKIE
  • 405
  • 1
  • 5
  • 12

1 Answers1

34

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);
});
Manwal
  • 23,450
  • 12
  • 63
  • 93