滾動到下一個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>