Jquery 是否可以在页面上放置焦点，以便在内容更改时滚动条随该点移动？

我的问题很像标题所说的，我有一个留言板，当添加新的信息时，它会不断扩展并向下推送信息。我想能够锁定滚动到一条消息，例如，这样页面滚动条移动时，留言板扩展，以保持相同的信息，你最初的看法。使用jquery可以做到这一点吗？感谢您的建议。

在我的回答中，您只需发送并告知消息的顺序即可。 在下面的示例中，将滚动到“消息栏”，然后滚动到“新消息”

你可以用这个

HTML

信息：

<div id="board">
    <span class="message" order="2">Message Foo</span>
    <span class="message" order="3">Message Bar</span>
    <span class="message" order="1">Message Test</span>
</div>

留言富
消息栏
消息测试

JS

$(document).ready(function(){   
    // each half second, updates scroll
    window.setInterval(updateScroll, 100);    

    // after 2 seconds, add new message to test scroll
    window.setInterval(newMessage, 2000);             
});

// find message with bigger order number, and scroll to it
function updateScroll(){
    var messages = $(".message");
    var newMessage = $(messages[0]);
    $(".message").each(function(){
        if ($(this).attr("order") > $(newMessage).attr("order")) {
            newMessage = $(this);
        }
    });
    var top = newMessage.offset().top;
    $(document).scrollTop(top);    
}

function newMessage() {
    var text = Date() + "<br/> - new message!";
    var tag = "<span order=\"9\" class=\"message\">" + text + "</span>";
    $('#board').prepend(tag);
}

$（文档）.ready（函数（）{
//每半秒更新一次滚动
设置间隔（updateScroll，100）；
//2秒钟后，向测试滚动条添加新消息
设置间隔（newMessage，2000）；
});
//查找订单号较大的邮件，然后滚动至该邮件
函数updateScroll（）{
var messages=$（“.message”）；
var newMessage=$（消息[0]）；
$（“.message”）.each（函数（）{
if（$（this.attr（“order”）>$（newMessage.attr（“order”））{
newMessage=$（这个）；
}
});
var top=newMessage.offset（）.top；
$（文档）.scrollTop（顶部）；
}
函数newMessage（）{
var text=Date（）+“
-新消息！”；
var tag=“”+文本+”；
$（#board'）。前置（tag）；
}

看中

---

编辑

说明：

• $（文档）.ready

  ：页面加载后

• window.setInterval（updateScroll，100）：每0.1秒调用一次updateScroll函数

• $（“.message”）.each（function（）{…}）

  ：以较大的顺序获取元素的位置

• $（文档）。滚动顶部（顶部）

  ：将页面滚动到该位置

---

您需要注册一个回调或事件处理程序，每当页面上的内容发生更改时就会触发该回调或事件处理程序

您需要滚动才能正常工作。退房

---

首先，感谢您的回复，非常感谢。然而，您的示例仅停留在底部，我更多地考虑的是单击目标，然后随着更多消息的出现，滚动条聚焦于该目标，因此不一定是底部消息，也可能是中间消息。@scarface:好的！我已经根据你的需要编辑了我的答案。看看吧。：）这看起来像我需要的，我真的不想添加更多的扩展代码，但这件事有点酷。我会尝试一下，让你知道好吧，哈哈，我开始对这件事的运作感到非常沮丧。我曾尝试实施，但没有得到任何回应。当然，我已经包括了jquery，插件脚本，（我已经提醒了一条测试消息，以确保它在那里），并尝试了不同的测试，试图使它工作。我试过这个，我试过这个jQuery（函数（）{$.scrollTo（'#footer'，800，{easing:'elasout'}）；}）；好吧，哇，我想出来了，真是愚蠢的插件，因为它给出的解释可能被误认为是由轻度弱智的人写的。宽松的代码甚至不是插件的一部分，您必须单独实现。不管怎样，我会尽力让这东西正常工作，然后再给你回复。

...
// Insert this code where you are adding the message to the page
// New message, trigger the custom event callback
// Assumes 'message' is a jQuery object for the new message.
message.trigger('scroll-to-message');
...

jQuery(function() {
  // Bind a handler for all messages (which should have a class 'message')
  // with a custom event name
  jQuery(document).delegate('.message', 'scroll-to-message', function() {
    var message = jQuery(this);
    jQuery.scrollTo(message);
  });
});