jquery - jquery滚动到底部

Question

我正在制作一个聊天程序。

所有聊天消息都在 chat_viewport div 中。

问题是，当页面刷新时，我想自动滚动底部到滚动框。

我用谷歌搜索了很多代码，但它们都不起作用:(

这是我的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/