Use jQuery para rolar para o fundo de uma div com muito texto

Eu tenho uma div com uma barra de rolagem à direita quando há muito texto nela. Eu tentei usar este código para rolar para o fundo de uma div quando a página é carregada, mas não estou tendo muita sorte. Como isso pode ser alcançado?

Estilo:

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

Código JavaScript:

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

Por favor, consulte: .scrollTop() , Você pode tentar a solução aqui: http://jsfiddle.net/y430ovjt/

 $(function() { var wtf = $('#scroll'); var height = wtf[0].scrollHeight; wtf.scrollTop(height); }); 
  #scroll { width: 200px; height: 300px; overflow-y: scroll; } 
  

blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
Voila!! You have already reached the bottom :)

Não há necessidade de calcular a altura real do conteúdo; você pode simplesmente rolar muito para baixo:

 $(function () { $('.messageScrollArea').scrollTop(1E10); }); 

Rolando com animação:

Seu DIV:

 
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

parte jQuery:

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

http://jsfiddle.net/3Wx3U/

 //note: use of stop function to prevent animation build-ups if called repeatedly //subtracting container height brings scrollTo position to container bottom scrollUp = function() { $("#scroller").stop().animate({ scrollTop: 0 }, "slow"); } scrollDown = function() { var scroller = $('#scroller'); var height = scroller[0].scrollHeight - $(scroller).height(); $(scroller).stop().animate({ scrollTop: height }, "slow"); } 
 $(function() { var wtf = $('#scroll'); var height = wtf[0].scrollHeight; wtf.scrollTop(height); }); 
  #scroll { width: 200px; height: 300px; overflow-y: scroll; } 
  

blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
blah
halb
Voila!! You have already reached the bottom :)

Torne uma function jQuery mais flexível.

 $.fn.scrollDown=function(){ let el=$(this) el.scrollTop(el[0].scrollHeight) } $('div').scrollDown() 

https://jsfiddle.net/Thielicious/82ar7db2/

Aqui está um exemplo: http://jsfiddle.net/CUUfb/1/