2014-10-17 116 views
0

我有以下代码,它是我使用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/

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

+0

如何添加'$('#displayChat')。scrollTop(0)'? – im1dermike 2014-10-17 19:58:34

回答

1

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

JSFiddle

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

我想你想,这是什么,而不是你的动画代码:

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

您也想使用,每一次被添加一个信息 - 它将滚动条放到div的底部。