jquery - 如果您只做一个小的滚动轻推或冲动，则滚动到元素

Question

我试图在用户开始滚动时自动滚动到一个元素，即只给出一个小的滚动冲动或轻推。因此，当用户开始向下滚动时，它应该自动将页面向上移动到下一部分。如果他开始向上滚动，页面应该会自动向上移动到上一部分。不知何故，我到目前为止的代码只是让一切变得非常不协调。

我希望滚动在这里像这样工作：https ://www.redlinespecialistcars.co.uk

jsfiddle 演示在这里：https ://jsfiddle.net/ch2Lg6vq

$(document).ready(function() {

  var browserheight = $(window).height();

  $(window).on('scroll', function() {

    $('.control-parent').each(function() {

      var scrollTop = $(window).scrollTop();
      var elementOffset = $(this).offset().top;
      var distance = (elementOffset - scrollTop);

      if (distance >= browserheight - 2) {
        $([document.documentElement, document.body]).animate({
          scrollTop: $(this).offset().top
        }, 1000);
      }

      if (distance <= browserheight - 2) {
        // do sthg else
      }

    }); // end for each
  }); // end on.scroll
}); // end document.ready

html,body{
  width:100%;
  height:100%;
  position:relative;
}
.control-parent{
  width:100%;
  height:100%;
  position:relative;
  background-color:#eeeeee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-parent">
1
</div>
<div class="control-parent">
2
</div>
<div class="control-parent">
3
</div>
<div class="control-parent">
4
</div>

标签： jquerycssscrollscrolltop