Auto Scroll to Bottom DIV

Question

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 ```

``` 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); ```

Accepted Answer

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);
});
```

Auto Scroll to Bottom DIV

Solution

Problem

Related problems