jQuery：スクロールをトリガーとしてセクションを自動スクロールする方法

Question

私はユーザーがナビゲーションバーなしでウェブページのセクションをナビゲートできる場所を試しています。ページには4つのセクションがあり、各セクションはフルサイズの画面（100vh）です。ユーザーがスクロールするたびに、次のセクションへのアニメーションの自動スクロールが必要になります。

jQuery/javascriptを使用してこの機能を追加するにはどうすればよいですか？

HTML：

<section></section> 
<section></section> 
<section></section> 
<section></section> 

CSS：

section { 
    background-color: #20c080; 
    height: 100vh; 
    width: 100vw; 
} 

UPDATE： のjQuery：

$(window).scroll(function() { 
var scroll = $(this).scrollTop(); 
console.log(scroll); 
if (scroll > 100 && scroll < 200) { 
     $('html, body').animate({ scrollTop: $('#about').offset().top }, 'slow'); 
     return false; 
} 
else if (scroll > 950 && scroll < 1050) { 
     $('html, body').animate({ scrollTop: $('#work').offset().top }, 'slow'); 
     return false; 
} 
}); 

Answer 1

私はあなたのコードを見ていないので、私は唯一、あなたがしたいと思うことができますユーザーがマウスをスクロールすると自動的にスクロールする

ているので、あなたはすべてのセクションにIDを与えることを試みることができ、マウスのスクロールトリガ後、jQueryの

によって以下のようにスクロール

var orgscroll = $(document).scrollTop(), switchcheck=false; 
 

 
\t \t \t function autoScroll(){ 
 
\t \t \t \t // if(scrollable){ 
 
\t \t \t \t \t if(switchcheck) return; 
 
\t \t \t \t \t switchcheck = true; 
 

 
\t \t \t \t \t var scroll = $(this).scrollTop(); 
 
\t \t \t \t \t // scrollable=false; 
 
\t \t \t \t \t 
 
\t \t \t \t \t if (scroll > orgscroll) { 
 
\t \t \t \t \t \t if (scroll < $('#lalelada').offset().top) { 
 
\t \t \t   $('html, body').animate({ scrollTop: $('#lalelada').offset().top }, 'slow'); 
 
\t \t \t \t \t \t }else if (scroll > $('#lalelada').offset().top && scroll < $('#about').offset().top) { 
 
\t \t \t \t \t \t $('html, body').animate({ scrollTop: $('#about').offset().top }, 'slow'); 
 
\t \t \t \t \t \t }else if (scroll > $('#about').offset().top && scroll < $('#work').offset().top) { 
 
\t \t \t \t \t \t $('html, body').animate({ scrollTop: $('#work').offset().top }, 'slow'); 
 
\t \t \t \t \t \t }else if (scroll > $('#work').offset().top) { 
 
\t \t \t \t \t \t $('html, body').animate({ scrollTop: $('#balabala').offset().top }, 'slow'); 
 
\t \t \t \t \t \t } \t 
 
\t \t \t \t \t }else if (scroll < orgscroll) { 
 
\t \t \t \t \t \t alert('I\'m scroll up'); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t orgscroll = scroll; 
 
\t \t \t \t // } 
 
\t \t \t \t setTimeout(function(){ switchcheck = false; }, 1000) 
 
\t \t \t } 
 

 
\t \t \t $(window).on('scroll', autoScroll); \t

section { 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
section:nth-child(even) { 
 
    background-color: #20c080; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section id="work"></section> 
 
<section id="about"></section> 
 
<section id="lalelada"></section> 
 
<section id="balabala"></section>