AB Tech AB Tech - 11 months ago 48
Ajax Question

how to scroll down a div when ajax is success?

I am developing a chat page, i am using ajax for sending messages and displaying the chat. i want to scroll down the div when the message is send.

this is my div

<div id="messages">
<img src="">
<label>Sender name</label>

this is my ajax

$("#btn_post").click(function(e){ //send message button id
type: "POST",
data: $('#frmGroupMessage').serialize(),
dataType: "text",
success: function(){
$('#messages').scrollTop($('#messages')[0].scrollHeight); // i tried this to scroll down but its not working.
error:function (xhr, ajaxOptions, thrownError){

Message is inserting and showing, but its not scrolling down to show the new message.
can anyone help me.

Answer Source

Try the following:

$("html,#messages").animate({ scrollTop:$('#messages').prop("scrollHeight"))}, "slow");


    $("html,#messages").animate({ scrollTop:$('#messages').prop("scrollHeight"))}, "slow");