Question

我有一个包含一些日志的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
});

但它似乎表现不佳。

我还有其他选择吗？

感谢

Answer 1

尝试使用间隔调用的函数向下滚动：

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(...)

Answer 2

问题是你正试图动画#log，当它实际上是html＆amp; body（我使用它们来修复一些不喜欢其中一种的浏览器）。

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

jsFiddle Example

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');
};

滚动到无高度动态div的底部

2 个答案: