提交Jquery表单后滚动到末尾

Question

我有一个基于jQuery表单插件的聊天。下面的脚本允许我在页面打开时向下滚动到最新的消息，刷新聊天正文以查看新消息，并在发送消息时处理输入字段(id=11)。

我想在发送消息并重新加载聊天正文后，向下滚动到最新的消息。我在#myForm的“成功”函数中尝试过这一点，但它不起作用。

​

window.onload = function() {
  document.getElementById('scroll').scrollTop = 9999999999;
}

$(document).ready(function() {

  refreshChat();

});

function refreshChat() {

  $('#scroll').load('getchat.php', function() {
    setTimeout(refreshChat, 1000);
  });
}


var options = {
  clearForm: true,
  resetForm: true,
  beforeSubmit: function() {
    $('#11').val('sending...');
    $('#11').attr('disabled', true);
  },
  success: function() {
    $('#11').val('');
    $('#11').attr('disabled', false);
    $('#scroll').scrollTop(9999999999); // Part I'm trying to work on
  }

};

$('#myForm').ajaxForm(options);

<form id="myForm" name="message" enctype="multipart/form-data" method="post" action="sendmessage.php">
  <div class="row">
    <div class="large-12 columns">
      <div class="row collapse">
        <div class="large-11 medium-10 small-9 columns">
          <input type="text" name="message" id="11" class="chat-message radius" placeholder="Type your message here...">
        </div>
        <div class="large-1 medium-2 small-3 columns">
          <input type="submit" class="button postfix radius" value="Send">
        </div>
      </div>
    </div>
  </div>
</form>

​

Answer 1

我建议写一个类似jquery机器人https://github.com/syaifulsz/simple-jquery-chatbot的函数。

下面是在每条消息之后调用的函数

function scrollToMessage() {
    var msgBox = $('#the name of the box');
    var height = msgBox[0].scrollHeight;
    msgBox.scrollTop(height);
}