jquery scoll на дно

Question

Я делаю чат-программу.

И все сообщения чата находятся в div chat_viewport.

Проблема заключается в том, что я хочу автоматически прокручивать нижнюю часть в прокрутку, когда страница обновляется.

Я гугле много кодов, но все они не работают :(

Это мой HTML

<div id="chat_viewport"> 
     <ul style="height:380px; overflow:auto" id="chat"> 
      <li> 
       test: 123123123213&nbsp;&nbsp;(2013-07-22 12:51:36) 
      </li> 
      <li> 
       test: gogogo&nbsp;&nbsp;(2013-07-22 13:32:58) 
      </li> 
      <li> 
       test: ddddd&nbsp;&nbsp;(2013-07-22 13:33:48) 
      </li> 
      <li> 
       test: ddddd&nbsp;&nbsp;(2013-07-22 13:33:48) 
      </li> 
      <li> 
       test: ddddd&nbsp;&nbsp;(2013-07-22 13:33:48) 
      </li> 
      <li> 
       test: ddddd&nbsp;&nbsp;(2013-07-22 13:33:50) 
      </li> 
      <li> 
       test: asdfasdfsdf&nbsp;&nbsp;(2013-07-22 13:36:36) 
      </li> 
      <li> 
       test: new one&nbsp;&nbsp;(2013-07-22 13:37:30) 
      </li> 
      <li> 
       test: testsetest&nbsp;&nbsp;(2013-07-22 13:37:58) 
      </li> 
      <li> 
       test: ddddd&nbsp;&nbsp;(2013-07-22 13:40:11) 
      </li> 
      <li> 
       test: sadfasdf&nbsp;&nbsp;(2013-07-22 13:40:51) 
      </li> 

      <li> 
       admin: ccc&nbsp;&nbsp;(2013-07-26 15:12:37) 
      </li> 
     </ul> 
    </div> 

Я попытался

$("html, body").animate({ 
    scrollTop: $('#chat').offset().top + $('#chat').outerHeight(true) - $(window).height() 
}, 500); 
$('#chat').scrollTop($('#chat_viewport')[0].scrollHeight); 
$("html, body").animate({ 
    scrollTop: $('#chat').offset().top - ($(window).height() - $("#chat").outerHeight() + 10) 
}, 500); 
    $("#chat").animate({ 
       scrollTop: $("#chat").scrollHeight 
      }, 1000); 

пытался как #chat и #chat_viewport, но все они не работают :(

Answer 1

Когда вы устанавливаете переполнение на #chat, сама высота ограничено до 380 пикселей, поэтому прокручивать нечего. Я переехал переполнение в #chat_viewport

<div id="chat_viewport" style="height:380px; overflow:auto"> 
    <ul id="chat"> 
     <li>..</li> 
    </ul> 
</div> 

Потом что-то, как это будет работать:

var chat_height = $('#chat').outerHeight(); 
$('#chat_viewport').scrollTop(chat_height); 

jsfiddle: http://jsfiddle.net/atRkJ/