Question

我有几个全屏div按以下方式划分页面设置：

<section class="row full-screen">

</section>

<section class="row full-screen">

</section>

<section class="row full-screen">

</section>

当我滚动X量时，让我们说50px，从第一个div的顶部开始我希望它向下滚动到下一个div，然后当用户在第二个div上再次滚动50px时，滚动到第三个div。

它也应该反过来。

我在下面尝试过：

$(document).scroll(function () {
    var y = $('.full-screen').scrollTop();        
    if (y > 50) {
        $('html,body').animate({ scrollTop:$('.full-screen').next().top}, 'slow');});
    } else {
        $('html,body').animate({ scrollTop:$('.full-screen').previous().top}, 'slow');});
    }
});

我哪里错了？

Answer 1

您需要document滚动值，而不是.full_screen。

所以你需要改变

$('.full-screen').scrollTop();

到

$(document).scrollTop();

Answer 2

我已经为一个方向做了滚动到下一个元素。与此相同，你也可以做反向。

＆＃13;

var current = $('.full-screen').first();
$(document).scroll(function() {
  var y = $(document).scrollTop() - current.offset().top;
  if (y > 50) {
    $('html,body').animate({
      scrollTop: current.next().offset().top
    }, 'slow');
    current = current.next('.full-screen');
  }
});

＆＃13;

.full-screen {
  height: 400px;
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="row full-screen">

</section>

<section class="row full-screen">

</section>

<section class="row full-screen">

</section>

＆＃13;

从顶部50px滚动到下一个div

2 个答案: