Making divs from AJAX calls scroll automatically to the bottom of the parent section

Question

I currently have this code written out for a chat style interface and wanted to know how I could go about making it so that the container auto-scrolls to the most recent message. As it currently stands, once the chat container have enough messages to warrant the user to scroll, the newer messages are hidden below the scroll bar. Is there any way to have it so that the most recent message is automatically scrolled to?

possible duplicate of [jQuery scroll to bottom of page](http://stackoverflow.com/questions/13583180/jquery-scroll-to-bottom-of-page) — the_pete, Jul 21 '15 at 13:27

ZelkiN · Answer 1 · 2015-07-21T13:39:16.723

0

if you have jquery you can use the .append() like this

var html='response of chat';
$('.classOfDiv').append(html);

And after use the scrolling function of jquery

$('.classOfDiv').animate({ scrollTop: $('.classOfDiv').height() }, 1000);

Enjoy !

edited Jul 21 '15 at 13:39

answered Jul 21 '15 at 13:36

ZelkiN

1,721
1
10
6

where you used `after()`? – Mehdi Dehghani Jul 21 '15 at 13:38
sorry i edit my post, use append() to stay in the same div – ZelkiN Jul 21 '15 at 13:39

Making divs from AJAX calls scroll automatically to the bottom of the parent section

1 Answers1