How can I get my scrollbar to automatically lock itself to the bottom of the div?

Question

I am making a web chat application and I need some help. I add a few paragraphs to the div and I set the overflow to auto. When the content of the div containing the chat is full, it creates a scroll bar but remains at the top of the div. I would like the scroll to be fixed at the bottom, so users don’t have to scroll every time they receive a message. What should I do?

Answer 1

Standard JavaScript Solution

Use the scrollTop property. Check out this demo .

JavaScript

 container.scrollTop = content.getClientRects()[0].height;

HTML

<div id="container">
  <div id="content">Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
   </div>
 </div>

scrollTop getClientRects

Answer 2

scrollTop scrollHeight ( ) DIV , . .

Answer 3

, , window.location

$('<div>').attr('id','placeholder').appendTo('#content');
window.location.hash = '#placeholder';
$('#placeholder').remove();

DEMO

Answer 4

jQuery. http://jsfiddle.net/94LBc/1/

$("#btn-addPara").click(function(e){
  $("#container").append('<p>New message</p>');

  $('#container').animate({
    scrollTop: $("#container").children(':last').offset().top
  }, 1000);
});

Answer 5

. , , :

Make the scrollbar lock at the bottom even when adding content to it