滚动到下一个DIV从顶部

Question

50px的时候我有几个全屏幕的div瓜分通过以下方式页面设置：

<section class="row full-screen"> 

</section> 

<section class="row full-screen"> 

</section> 

<section class="row full-screen"> 

</section> 

当我滚动X量，让我们只说50像素，从的顶部第一个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

我已经为一个方向滚动到下一个元素制成。与此相同，您也可以做相反的操作。

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'); 
 
    } 
 
});

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

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