How do I make my scrollview automatically scroll down when text is added?

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('');
    });

It is a socket.io chat app and I want the messages to stay in view and not have to scroll down to see what the person said. Everything I have tried has not worked. everything works other then the scrollbar does not force down when text is added to the "chat".

for example:

When someone types a message on the site, it just appends to the screen. I need it to append to the screen as well as the scroll view to continue to stay at the bottom of the chat. As of right now the messages go of screen and the user has to manually scroll down to see them.

Answer 1

Try these:

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

It's has an animate function that scrolls down in 0.5secs.