Как сделать следующую реализацию:
Изначально пользователь находится в шапке, при попытке скролла, его автоматически скроллит к следующей секции и дальше если он скроллит вниз, то он делает это уже сам, а если вверх, то его обратно автоматически скроллит в самый вверх и дальше уже повторяется всё.
Смог написать только скролл вниз, а как обратно и опять по кругу, что-то не выходит.
var scrollNum = 1;
$(window).scroll(function() {
console.log($(this).scrollTop());
var scrlTop = $('header').height() - 20;
if($(this).scrollTop() > scrollNum){
$('html, body').animate({ scrollTop: $('.next-section').offset().top }, 1000);
scrollNum = 9999999;
}
if($(this).scrollTop() == scrlTop){
console.log('скролл вверх');
$('html, body').animate({ scrollTop: $('header').offset().top }, 1000);
scrollNum = 1;
}
});
header {
background: blue;
height: 300px;
}
.next-section {
height: 600px;
background: red;
}
.some-sect {
height: 200px;
background: green;
}
<header></header>
<div class="next-section"></div>
<div class="some-sect"></div>
<div class="some-sect"></div>
<div class="some-sect"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>