Javascript滚动到滚动元素

Question

我找了很久，但还没有找到解决方案。

我想滚动到滚动的下一个元素。

$(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>

所以容器是全屏高度。当用户滚动一点时，他应该到达下一个容器。 目前它会滚动到最后或更多。

Answer 1

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

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

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

另外，不相关 - 你的scrollToPosition调用在错误的位置有括号，可能应该是这样的:

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

编辑:

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

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