Question

Here is a simple of my code (its a chat displaybox)

<div class="chat_container" style="height:380px; word-wrap:break-word; overflow-y:auto; overflow-x: hidden;">
  <div class="message">message1</div>
  <div class="message">message2</div>
  <div class="message">message3</div>
  ....
</div>

I want when I open this page the scrollbar of the(duv.chat_container) to be at bottom not at the top of this .chat_container. Can you help me with it ? (perhaps some Ajax or Jquery code)

Answer 1

You can use the $(‘div.chat_container’).scrollTop() function to set the scrollbar to the height of the element you want.

Remember that the position of the scroll is calculated from the top, so the lower the scrollbar is, the higher the value.

Something like this should work:

var $container = $('div.chat_container');
$container.scrollTop($container.height());