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

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

can you share the demo using fiddle or codepen. – Tushar Jul 16 '14 at 05:02 — Tushar, Jul 16 '14 at 05:02

Manwal · Accepted Answer · 2018-10-10T06:11:32.720

33

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

edited Oct 10 '18 at 06:11

answered Jul 16 '14 at 05:12

Manwal

22,994
11
59
91

score 5 · Answer 2 · answered Aug 30 '17 at 14:31

5

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

answered Aug 30 '17 at 14:31

Bhupinder kumar

760
5
19

7

Thank you for this code snippet, which may provide some immediate help. A proper explanation [would greatly improve](//meta.stackexchange.com/q/114762) its educational value by showing *why* this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please [edit] your answer to add explanation, and give an indication of what limitations and assumptions apply. – Toby Speight Aug 30 '17 at 17:19

Auto Scroll to Bottom DIV

2 Answers2

Linked