添加文本时如何使我的滚动视图自动向下滚动？

Question

<div id="Content">
  <div id="chatContent" id="console">
    <h4 style="text-align: center; color: rgb(130, 224, 255);">Messages</h4>
    <div id="chat" class="scroll">
    </div>
      <form id="send_message" action="">
        <input id="message" autocomplete="off" /><button>Send</button>
      </form>
  </div>
  <div id="Connected">
    <h4>Users</h4>
      <div id="Users">
      </div>
  </div>
</div>      

 $(document).ready(function(){
    var socket = io.connect();
    var $nickForm = $('#SetName');
    var $nickError = $('#NameError');
    var $nickBox = $('#Nickname');
    var $users = $('#Users');
    var $messageForm = $('#send_message');
    var $messageBox = $('#message');
    var $chat = $('#chat');
    var $console = $('#console');


    $messageForm.submit(function(e){
      var height;
      e.preventDefault();
      socket.emit('send message', $messageBox.val());
      height = $chat.height();
      $console.scrollTop(height);
      $messageBox.val('');
    });

这是一个 socket.io 聊天应用程序，我希望消息保持在视图中，而不必向下滚动即可查看该人所说的内容。我尝试过的一切都没有奏效。当文本添加到“聊天”时，除了滚动条不会强制向下之外，一切正常。

例如：

当有人在网站上键入消息时，它只是附加到屏幕上。 我需要它附加到屏幕以及滚动视图以继续留在聊天的底部。截至目前，消息离开屏幕，用户必须手动向下滚动才能看到它们。

Answer 1

试试这些：

$console.animate({
  scrollTop: $console.get[0].scrollHeight
}, 500)

它有一个动画功能，可以在 0.5 秒内向下滚动。