Как сделать свой scrollview автоматически прокруткой вниз при добавлении текста?

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.