Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Auto Scroll to Bottom DIV

Tags:

jquery

css

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);                   
like image 716
DUDEZKIE Avatar asked Jul 16 '14 04:07

DUDEZKIE


People also ask

How do I make a div Auto scroll?

Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.

How do you automatically scroll to the bottom of a page?

To use you just need to press CTRL+ Left click of your mouse and drag the mouse a bit in the direction you want to scroll the page. For example, if you want to scroll up to the page automatically, click CTRL+ left click and slightly move your mouse upwards, the tool will start scrolling up the page.

How do I automatically scroll down in HTML?

The first one is with javascript: set the scrollTop property of the scrollable element (e.g. document. body. scrollTop = 1000; ). The second is setting the link to point to a specific id in the page e.g.


1 Answers

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);
});
like image 173
Manwal Avatar answered Sep 20 '22 13:09

Manwal