javascript - Jquery 立即向下滚动到一个类

Question

我正在开发一个小聊天应用程序。我想向下滚动到第一条未读消息。这是我的:

for i in data.conversation
 $('#chatBox').append("<div class='rrr'>i.message + "-" + i.read</div>")

data.conversation 是一个包含消息和读取值的对象。如何将 #chatBox 一直滚动到 i.read 等于 unread 的位置？

Answer 1

您需要“识别”要滚动到的元素。 例如，为已读/未读添加一个“类”:

$('#chatBox').append("<div class='rrr status-" + i.read + "'>i.message + "</div>")

所以你可以“定位”它在循环后滚动到那里:

$('html, body').animate({
    scrollTop: $(".status-unread").offset().top
}, 2000);

检查“可能的重复项”以获取有关滚动的更多信息。

编辑: ...也检查这个答案，它更接近你的情况:jquery Scroll to class name

如果您希望它是“即时的”，只需将动画时间 (2000) 更改为 0...或比 2 秒短得多但仍能让用户感到舒适的值。