javascript - 在页面加载时滚动到底部

Question

我有以下代码，它是我使用 Firebase API 获得的聊天显示。问题是，当页面加载时，我希望它直接在底部设置滚动条。目前它有点缓慢地滑到底部(因为 .animate)。当我重新加载页面时，如何让滚动条始终停留在底部，即使聊天中添加了新内容？

$(document).ready(function () {    
    var myDataRef = new Firebase('https://ot7fwnsj7h7.firebaseio-demo.com/');
    myDataRef.on('child_added', function (snapshot) {
        var message = snapshot.val();
        displayChatMessage(message.name, message.text);
    });

    function displayChatMessage(name, text) {
        $('<div/>').text(text).prepend($('<em/>').text(name + ': ')).appendTo($('#displayChat'));
        // make text scroll everytime someone posts
        $('#displayChat').animate({
            scrollTop: $("#displayChat")[0].scrollHeight
        }, 'slow');
    };
});

这是我的 fiddle :

http://jsfiddle.net/qxkr35pj/

希望我已经说清楚了!谢谢。

Answer 1

这行代码将元素滚动到底部。每次更新 View 时调用它。

JSFiddle

$("#displayChat")[0].scrollTop =  $("#displayChat")[0].scrollHeight