页面加载时滚动到底部

Scroll to bottom on page load

本文关键字：底部 滚动 加载      更新时间：2023-09-26

我有以下代码，这是我使用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');
    };
});

这是我的小提琴：

http://jsfiddle.net/qxkr35pj/

我希望我已经清楚了！谢谢

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

JSFiddle

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

我想你想要的是这个，而不是你的动画代码：

$('#displayChat').scrollTop($("#displayChat").height());

您还想在每次添加消息时使用它-它会将滚动条带到div的底部。

相关文章：