如何在添加文本時使滾動視圖自動向下滾動？

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.5secs向下滾動的動畫功能。