Javascript 使用jQuery AJAX调用时，scrollTop（）函数滚动到AJAX调用之前而不是之后的最新项

我正在建立一个简单的聊天页面，供我的网站成员使用。该页面目前正在生产中；现在，我将页面设置为仅在用户发送消息时检查新的聊天消息。作为jQuery函数（包括$.ajax调用）的一部分，我使用了StackOverflow社区建议的一段代码滚动到包含聊天记录的div的底部，但是这段代码在$.ajax调用中表现为“错误的一面”。我的HTML在这里：

<div id="chat">

</div>

<form id="chat-input">
   <textarea form="chat-input" id="message" name="message" placeholder="Type your message here..." autofocus></textarea>
</form>

我的PHP脚本输出此信息（为了简单起见，我在启动时以HTML而不是JSON输出-稍后将升级为JSON输出）：

My#chat div的固定高度为400px，溢出设置为滚动。许多其他堆栈溢出问题表明，上面的代码将保持#chat div滚动到底部，它们确实是这样的。这些代码行似乎不是在$.ajax调用之后将.scrollTop设置为底部，而是在$.ajax调用之前将.scrollTop设置为底部（即，第二个最近的聊天显示在div的底部，其中显示了最近的聊天，但没有滚动到）。代码是form.submit（）函数的一部分，但位于$.ajax调用之后。当jQuery滚动到底部时，如何修改代码以包含新的聊天消息

---

如果这很重要的话，我正在PHPV5.3中使用AMPPSV3.5（我的web主机仍然使用5.3），我正在Firefox46.0.1中进行测试。

Ajax调用是异步的。这意味着它们下面的代码将在调用挂起时执行

因此，您的scrollTop调用在ajax.success调用之前执行

---

如果希望在ajax调用收到响应后进行滚动，请将其包含在成功回调中。

将其放入

success:function（data）中{

，如果你想让它发生，即使调用本身失败，也会出现错误。非常感谢：）我必须说，这个网站是上帝给新手的礼物。我已经使用PHP和HTML很多年了，但AJAX是一个全新的最好的网站。谢谢！非常好：）

   $('#chat-input').submit(function() {
           var new_chat = $('textarea[name=message]').val();//gets the value of the message box to send
           var most_recent_chat = $('.chat-item:last-child').attr('data-chat-id');//gets the id# of the last chat
           $.ajax({
                url: "/docs/chat/chat.php",
                dataType: 'html',
                type: "post",
                data: {
                    new_chat: new_chat,
                    most_recent_chat: most_recent_chat,
                    new_sender: new_sender //Declared globally elsewhere
                },
                success: function(data) {
                    $('#chat').append(data);
                },
                    error: function(jqXHR, exception) {
                    //switch containing various errors
                    }           
                }
            });

           var divHeight = document.getElementById('chat').scrollHeight;
           $('div#chat').scrollTop(divHeight);
           document.getElementById('message').value='';
           event.preventDefault();
       });

<div class="chat-item" data-chat-id="(int)">//each chat has a unique id so that my php processing page only returns new chats
<p class="chat-message"><strong>(sender-name): </strong>(chat message)</p>
<p class="chat-time">(time of message)</p></div>

var divHeight = document.getElementById('chat').scrollHeight;
$('div#chat').scrollTop(divHeight);