how to fix the scrollbar always at the bottom of a div?

Question

I am doing a simple chat application,I want to fix the scrollbar of a div always at the bottom.just like this

Answer 1

You can do it using jQuery as you can see the demo here:

http://jsfiddle.net/9S92E/

Answer 2

Below line of code to scroll vertical scrollbar always in bottom of the whole page.

$("html, body").animate({ scrollTop: $(document).height() }, "fast"); 

Below line of code to scroll vertical scrollbar always in bottom of scrollable div container named to "daViewerContainer".

$("#daViewerContainer").animate({ scrollTop: $(document).height() }, "fast");

Answer 3

I fixed this with:

$(document).scrollTop($(document).height());

All depends how you configure your div's, then use the div for document. But this one works exellent with sticky footers as well.

Answer 4

Try this jquery :

$(".messages").animate({ scrollTop: $(document).height() }, "slow");
  return false;

and here is the fiddle : http://jsfiddle.net/EX6vs/

or refers to the height of the element (many agree is the right way), as below:

$(".messages").animate({ scrollTop: $(this).height() }, "slow");
  return false;

and here is the fiddle : http://jsfiddle.net/69vpnyu1/

Answer 5

function loadchatval(){
    $.post('loadchat.php',function(data){               
    $('#load_chat').html(data); 
    $("#load_chat").animate({ scrollTop: $(document).height() }, "slow");
    return false;
});
}

Answer 6

you want something like this, where box is the div that contains your chat. call these on page load.

var box = document.getElementById('Box');
box.scrollTop = box.scrollHeight;

also call this when you post a new chat.

i had created a similar application using google app engine. you can have look at it here

http://chatter-now.appspot.com/

feel free to use it as reference. although you are using php, the visual aspects might be helpful.