jquery - 如何强制/引导滚动到最近的元素？

Question

Stellar.js 的网站就是一个例子。 。唯一的问题是，我已经在使用视差库(ScrollMagic)并且不想用 Stellar 重做我的网站。我该怎么做？ (jQuery 是可以接受的。)

编辑:我忘了提及这些部分是整页的。

Answer 1

这可以让用户滚动，当他停止时，它会弹到下一个位置。

scrollTo($(".start"));


$(document).on('mousewheel ', function(e) {

  //e.preventDefault(); /** optional, you might want to try it **/

  
  
  /** elements to bounce to: **/
  var $elements = $("div[data-scrollBolock]"); 
  
  /** get the next/previous element based on the scrolling direction: **/
  var $elementToScrollTo = $elements.eq(0);
  var scrollDirection = "down";
  if (e.originalEvent.wheelDelta >= 0) {
    scrollDirection = "up";
    $elements = $($elements.get().reverse());
  }

  $elements.each(function() {
    var scrollTop = $(window).scrollTop(),
      elementOffset = $(this).offset().top,
      distance = (elementOffset - scrollTop);
    if (scrollDirection === "down") {
      if (distance > 0) {
        $elementToScrollTo = $(this);
        return false;
      }
    } else {
      if (distance < 0) {
        $elementToScrollTo = $(this);
        return false;
      }
    }
  });

  
  /** scrollTo $elementToScrollTo but only if the user stopped scrolling **/
  clearTimeout($.data(this, 'scrollTimer'));
  $.data(this, 'scrollTimer', setTimeout(function() { //user stopped scrolling
    scrollTo($elementToScrollTo);
  }, 80));

});


function scrollTo($el) {
  $('html,body').animate({
    scrollTop: $($el).offset().top
  }, 500);
}

div {
  height: 200px;
  width: 50%;
  border-bottom: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div data-scrollBolock>1</div>

<div class="start" data-scrollBolock>2</div>

<div data-scrollBolock>3</div>

<div data-scrollBolock>4</div>

<div data-scrollBolock>5</div>

<div data-scrollBolock>6</div>