Use jQuery to scroll to the bottom of a div with lots of text

Question

I have a div with a scrollbar on the right when there is a lot of text in it. I tried to use this code to scroll to the bottom of a div when the page loads, but I am not having much luck. How can it be achieved?

Style:

div.messageScrollArea{width:100%; max-height:300px; overflow:auto;}

JavaScript code:

$(document).ready(function () {
    var objDiv = $('.messageScrollArea);
    if (objDiv.length > 0)
        objDiv[0].scrollTop = objDiv[0].scrollHeight;
});

Answer 1

Here's one sample: http://jsfiddle.net/CUUfb/1/

Answer 2

Refer : .scrollTop()

$(function() {
  var height = $('#scroll')[0].scrollHeight;
  $('#scroll').scrollTop(height);
});

You can give it a try here : http://jsbin.com/ucinu

Answer 3

Scrolling with animation:

Your DIV:

<div class='messageScrollArea' style='height: 100px;overflow: auto;'>
      Hello World! Hello World! Hello World! Hello World! Hello World! Hello
      Hello World! Hello World! Hello World! Hello World! Hello World! Hello
      Hello World! Hello World! Hello World! Hello World! Hello World! Hello
</div>

jQuery part:

jQuery(document).ready(function(){       
    var $t = $('.messageScrollArea');
    $t.animate({"scrollTop": $('.messageScrollArea')[0].scrollHeight}, "slow");
});

​http://jsfiddle.net/3Wx3U/