1

我有一个包含一些日志的 div

<div id="log">
   <div class="logitem"></div>
   <div class="logitem"></div>
   <div id="containerbottom"></div> 
</div>

在日志中，在运行时，我附加了更多未知数量的<div class="logitem"></div>.

我想在添加项目后立即滚动到容器底部

我试过使用：

$('#log').animate({
     scrollTop: $('#containerbottom').offset().top
});

但它似乎表现不佳。

我还有什么其他选择可以做到这一点？

谢谢

4

2 回答 2

4

尝试使用每隔一段时间调用的函数向下滚动：

function scrollDown()
{
    $("html, body").animate({ scrollTop: $(document).height() },'slow');
}

setInterval(scrollDown,1000); // Executes function every 1,000 milliseconds.

编辑：

我最近发现使用递归setTimeout而不是setInterval尽可能避免阻塞事件队列并在出现错误时导致大量重复错误消息是一种很好的做法。此方法仅适用于不需要精确计时的应用。如果您仍然需要每 1,000 毫秒准确调用一次函数（例如秒表），请继续使用setInterval.

例子：

(function scrollDown(){
    $("html, body").animate({ scrollTop: $(document).height() },'slow');
    setTimeout(scrollDown,1000);
})();

如果您的 jQuery 动画堆积在 jQuery 的动画队列中，您可能需要使用.stop().animate(...)

于 2012-07-25T16:50:15.763 回答
0

问题是您正在尝试为#log 设置动画，而实际上它是 html 和正文（我同时使用这两种方法来修复一些不喜欢其中一种的浏览器）。

这是我在我的 JS 库中使用的一个快速小函数，除了任何#id 之外都是动态的，但基本上它会滚动 $('html, body').animate();

jsFiddle 示例

jNamespace._goToByScroll = function(id) {
    //NOTE: Scroll to specific #ID in html
    //Useage: jNamespace.goToByScroll('top') - ommit #, added inside function
    //ENDNOTE

    $('html,body').animate({ scrollTop: $("#" + id).offset().top }, 'slow');
};
于 2012-07-25T15:25:00.097 回答