Javascript 如何循环滚动事件

我的问题可能很简单。如何循环此函数？ 现在，滚动事件只工作一次。我正在寻找如何启用else功能的解决方案（平滑滚动从红色分区变为蓝色分区）

以下是js代码：

var o = true;

if (o === true) {
$('div').scroll(function () {
        if(o){
      $('div').animate({
          scrollTop: $("#red").offset().top
      }, 1000);
      o=false;
     }
});
} 

else {
$('div').scroll(function () {
        if(o === false ){
      $('div').animate({
          scrollTop: $("#blue").offset().top
      }, 1000);
      o=true;
     document.write(o);
    } 
});
}

HTML+CSS+JS：

---

我要找的是：当你向下滚动时，有一个动画会带你到红色div。所以，我想添加一个动画，在向上滚动后会带你到蓝色div。记住代码是什么时候执行的。也就是说：当它到达时

我们可以将您的代码简化为

let a = true;
if (a) {
  functionA();
} else {
  functionB();
}

显然，当我们到达这个代码时，

function

将被执行。我们从不执行

functionB

，因为，这个代码再也不会执行了

---

使用此信息，并查看您的代码，我们看到您只附加了第一个滚动处理程序，它具有滚动到红色div的行为。滚动处理程序在每个滚动事件上执行。如果您能够像现在这样成功地执行代码，那么最终将有无限多的滚动处理程序尝试滚动到红色div，而有无限多的滚动处理程序尝试滚动到蓝色div

我们要做的是只创建一个在处理程序中包含所有相关逻辑的滚动处理程序。或者，换句话说，决定是在滚动处理程序中做出的，而不是在周围的代码中

let onRed = true;
$('div').on('scroll', () => {
  let scrollTarget;
  if (onRed) {
    scrollTarget = $('#blue');
  } else {
    scrollTarget = $('#red');
  }

  $('div').animate({
    scrollTop: scrollTarget.offset().top
  }, 1000);
  onRed = !onRed;
});

---

你能更具体地说一下你想要实现什么吗？在将if/else添加到一个滚动事件后，我的功能是这样的：我在寻找什么：当你向下滚动时，有一个动画会带你到红色div。所以，我想添加动画，在向上滚动后会带你到蓝色div。谢谢你的回答。我编辑了我的问题（为了更好地说明我在寻找什么）。在您的代码中，用户在滚动后失去了对该元素的控制。我在找不同的东西。在向下滚动后，动画将用户带到第二个分区。当用户向上滚动时，动画将用户带到第一个分区。因为这不是原始问题，所以我不会更改我的答案。不过，你可以找到第二个问题的所有信息。我知道如何确定滚动方向，我的问题不同。当我向下滚动时，我的函数被执行。在另一个滚动之后，在顶部移动的解决方案是什么？我认为最好的方法是在函数内部更改var“o”（当执行第一个函数时，全局var从true更改为false，这样第二个函数就可以启动了），但如何做到这一点呢？请记住，我将您链接到了一个

轮
事件。除此之外，与我的答案使用的
onRed
完全相同。