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上设置溢出时，高度本身会限制为380px，因此没有任何内容可以滚动。我将溢出移动到#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/

jquery滚动到底部

1 个答案: