在两个循环之间切换

Question

作为了解jQuery的一种方式，我正在尝试编写一个函数，使其可以无限循环地滚动到页面底部、回到顶部，然后重新开始。

到目前为止，我已经得到了这个：

var scroll = $(document).scrollTop();

setInterval(function(){
        scroll += 5;
        $(document).scrollTop(scroll);
}, 10);

这将滚动到页面底部。

当它滚动到底部时，需要设置一个标志，例如var direction = 1，其中1表示向下滚动，0表示向上滚动。
现在我需要添加类似的内容。

if(direction){
    // scroll down
} else {
    // scroll up
}

所以，我会不断检查direction的值，并通过+=5或-=5递增scroll变量。这个逻辑听起来合理吗？还是有更简单的方法实现这个功能？

编辑

这里是somethinghere建议的可行版本。

https://jsfiddle.net/Panomosh/evkxou3e/

- Josh Stevenson

Answer 1

你应该使用jQuery的回调函数来创建一个无限递归的函数。只需要在你的animate函数声明后添加一个函数，然后调用相同的函数，但将传递的布尔值反转。

此外，animate会为您非常好地平滑增加！

function scrollTopOrBottom(top){
    if(top) $("body, html").animate({scrollTop: 0}, function(){
        scrollTopOrBottom(false);
    });
    else $("body, html").animate({scrollTop: $("document").height()}, function(){
        scrollTopOrBottom(true);
    });
}

scrollTopOrBottom(false);

更新：如上所述，这可能会创建一个* *咳咳* *堆栈溢出，但是此时问题并不涉及此问题。如果您想要安全，请在每个$（“body，html”）语句之后使用stop()来阻止调用继续进行，从而推迟溢出。

注意：您还可以将if语句包装在{}中，但由于它只是一个语句，我认为它更易读，更像句子而不是代码。但这是个人偏好。

- somethinghere

---

当然可以动画！谢谢somethinghere，我没想到setInterval()是正确的方法。 - Josh Stevenson

@andybeli 这种方式并不是错误的，但我想提一下。我认为，当只执行这一个语句时，这种写法更易读... 它字面上读作 if...else。 - somethinghere

我会推迟递归调用，这样就不会有堆栈溢出的风险。 - user3508122

这绝对不是错误的！但在我看来，这样做更易读。 - andybeli

@JoshStevenson 哦，糟糕。我会修改的。哎呀！ - somethinghere

Answer 2

您可以将方向的值设置为 1 以向下滚动或 -1 以向上滚动。

然后，当更改滚动的值时，您可以执行以下操作：

scroll += 5 * direction;

- extols