Scroll bar goes up

Question

I have a chatbox in my website but everytime I type a message. the scroll bar goes up. how do I make it be fixed at the bottom like chatting in facebook.

this is the css

 .chat-messages {
    background-color: #fff;
    margin: 10px;
    padding: 10px;
    line-height: 1.2em;
    height: 550px;
    max-height: 550px;
    overflow-y: auto;
}

Answer 1

for this you need to use javascript. every time you enter a message or you receive a message you have to scroll to bottom in javascript

try this (if you use jquery):

var textarea = $(".chat-messages");
if(textarea.length)
   textarea[0].scrollTop = textarea[0].scrollHeight;

if you do not use jquery add an id to your textarea and then do this:

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;