jQuery – 每隔x秒向下滚动一次，然后滚动到顶部

我有一个可滚动的div，我想每X秒向下滚动50个像素。 那很好，很有效。

我还有一个单独的function，当它到达底部时将div滚动回顶部。 也很好; 工作。

现在，我需要将两者结合起来，以便忽略scrollldown，直到我们再次滚动到顶部。

我在这里有一个“工作”的例子，因为你会发现它有一些非常疯狂的行为： http ： //jsfiddle.net/JVftf/

window.setInterval(scrollit, 3000); function scrollit() { $('#scroller').delay(2000).animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow'); } $('#scroller').bind('scroll', function () { if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { $('#scroller').delay(2000).animate({ scrollTop: 0 }, 1000); } }); 

Answer 1

我的版本：

 var scrollingUp = 0; window.setInterval(scrollit, 3000); function scrollit() { if(scrollingUp == 0) { $('#scroller').delay(2000).animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow'); } } $('#scroller').bind('scroll', function () { $('#status').html(scrollingUp); if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { scrollingUp = 1; $('#scroller').delay(2000).animate({ scrollTop: 0 }, 1000, function() { scrollingUp = 0; }); } });​ 

演示： http ： //jsfiddle.net/EFmeK/

顺便说一句，在你的jsfiddle中，它滚动60px而不是50px，我在我的例子中“修复”了。

Answer 2

尝试类似的东西： http ： //jsfiddle.net/JVftf/3/

 window.setInterval(scrollit, 1000); function scrollit() { console.log(($("#scroller").scrollTop() + $("#scroller").innerHeight())) console.log($("#scroller")[0].scrollHeight) if(($("#scroller").scrollTop() + $("#scroller").innerHeight()) >= $("#scroller")[0].scrollHeight) $('#scroller').animate({ scrollTop: 0 }, 100).delay(900); else $('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 60 }, 'slow',function(){ }); }