我正在开发一个聊天页面,我正在使用ajax发送消息和显示聊天。发送邮件时,我想向下滚动div。

这是我的div

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


这是我的阿贾克斯

$("#btn_post").click(function(e){ //send message button id
        $('#ajax_loader').show();
        $.ajax({
            url:'messages/insert_group_messages',
            type: "POST",
            data: $('#frmGroupMessage').serialize(),
            dataType: "text",
            success: function(){
                $('#messages').load('group_name/new_messages/'+$('#group_id').val()).fadeIn("slow");
                $('#messages').scrollTop($('#messages')[0].scrollHeight); // i tried this to scroll down but its not working.
                $('#ajax_loader').hide();
           },
           error:function (xhr, ajaxOptions, thrownError){
                alert(thrownError);
           }
        });
        e.preventDefault();
    });


消息正在插入并显示,但没有向下滚动以显示新消息。
谁能帮我。

最佳答案

请尝试以下操作:

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


要么

$('#messages').load('group_name/new_messages/'+$('#group_id').val()).fadeIn("slow",function(){
    $("html,#messages").animate({ scrollTop:$('#messages').prop("scrollHeight"))}, "slow");
});

关于jquery - Ajax成功时如何向下滚动div?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39484782/

10-09 04:29