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

내가 코드를 보지 못했다, 그래서 난 단지 당신이 원하는 추측 할 수 사용자가 마우스를 스크롤 할 때 자동 스크롤 하시겠습니까? // GitHub의 : 그 그래서, 당신은 모든 단원에게 ID와 마우스 스크롤 트리거 이후를 제공하기 위해 시도 할 수있는 경우

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>