Javascript滚动到滚动条上的元素

我找了很久，但还没有找到解决办法

我想滚动到scroll上的下一个元素

$(window).load(function(){

  var scroll = false;

  $(function() {
    //Create an Array
    var sites = $('.site');
    var position = 0; //Start Position
    var next = $('#next');
    var lastScrollTop = 0;

    $(window).scroll(function(event){
      if(scroll == false){
            scroll = true;
            $(document).off('scroll');
            var st = $(this).scrollTop();
            if (st > lastScrollTop){
              if (position !== sites.length - 1) {
                scrollToPosition(sites[position += 1]),5000;
              }
            } else {
              if (position !== 0) {
                scrollToPosition(sites[position -= 1]),5000;
              }
            }
            lastScrollTop = st;
          }
        });
      })

    function scrollToPosition(element) {
      if (element !== undefined) {
        scrollToElement($(element).attr('id'));
      }
    }

    function scrollToElement(selector, time, verticalOffset) {
      time = typeof(time) != 'undefined' ? time : 500;
      verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
      selector = "#" + selector;
      var element = $(selector);
      offset = element.offset();
      offsetTop = offset.top + verticalOffset;
      $('html, body').animate({
        scrollTop: offsetTop
      }, time);
      scroll = false;
    }
  });

html中有许多具有不同ID的代码

<div id="test" style="width:100%; height:100vh;" class="site">

</div>

所以容器是全屏的。当用户滚动一点时，他应该进入下一个容器。

---

此时，它会滚动到最后或更多。

如果您可以在JSFIDLE或CodePen中创建一个示例，这会有所帮助，但我要做的第一件事是在启动新的jQuery动画之前停止任何当前的jQuery动画：

$('html, body').stop().animate({
  scrollTop: offsetTop
}, time);

您应该记住，当用户滚动时，滚动处理程序会执行多次

另外，不相关-您的scrollToPosition调用在错误的位置有括号，可能如下所示：

scrollToPosition(sites[position += 1], 5000);

$('html, body').stop().animate({
  scrollTop: offsetTop
}, time, function () {
    scroll = false;
});

编辑：

另一件可能会导致问题的事情-您应该仅在动画完成时取消设置“滚动”标志/变量，如下所示：

scrollToPosition(sites[position += 1], 5000);

$('html, body').stop().animate({
  scrollTop: offsetTop
}, time, function () {
    scroll = false;
});

---

小心，如果您的HTML有许多相同ID的

，那么它将无法通过验证程序，您可能会在以后遇到麻烦。