在滚动jquery上移动到div

我希望下面的代码的行为与下面的一样。 1.当scrollTop大于100时，它将移动到div1 2.当scrollTop大于div1.top位置+3时，它将移动到div2。我可以向上滚动，然后向下滚动时1,2的行为相同

目前它被困在div1中。有人能帮我弄清楚吗

$(window).scroll(function() {
  event.preventDefault();
  var div1 = $('#div1').offset();
  var div2 = $('#div2').offset();
  if ($(this).scrollTop() > 100) {
    //move to div1
    $('html, body').animate({
      scrollTop: div1.top
    },1000)
  }
  if ($(this).scrollTop() > div1.top + 100) {
    $('html, body').animate({
      scrollTop: div2.top
    },1000)
  }
});

---

您可以使用

$.stop（）

停止正在进行的动画，以处理您正在查找的场景：

    $(window).scroll(function() {
setTimeout(function() {
  var div1 = $('#div1').offset();
  var div2 = $('#div2').offset();
  var page = $("html, body");
  if ($(this).scrollTop() > 50) 
  {
    page.stop();
    page.animate({
      scrollTop: div1.top
    },500);
  }
  if ($(this).scrollTop() > div1.top + 100) 
  {
    page.stop();
    page.animate({
      scrollTop: div2.top
    },500)
  }
  },1000);
});

---

示例：

当前，每次用户滚动时，您的代码都会触发—您正在捕获事件并将其向上滚动，然后用户才能通过100px到达div2

您需要

throttle

或

debounce

处理程序-有关实现和详细信息，请参阅以下问题：

---

谢谢你，迪诺。但由于某些原因，您的示例确实移动得很慢，而且似乎并没有达到我想要的效果。由于window.scroll事件被多次调用，您可以将逻辑封装在setTimeout中。我已经更新了解决方案和小提琴。或者，您可以使用取消绑定滚动事件。