Как настроить скролл вниз/вверх ?

173
22 февраля 2018, 12:16

Как сделать следующую реализацию:

Изначально пользователь находится в шапке, при попытке скролла, его автоматически скроллит к следующей секции и дальше если он скроллит вниз, то он делает это уже сам, а если вверх, то его обратно автоматически скроллит в самый вверх и дальше уже повторяется всё.

Смог написать только скролл вниз, а как обратно и опять по кругу, что-то не выходит.

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>

Answer 1

Присвой каждому блоку свой id и на евент скролла назнач переход к следующему id (по якорю) в зависимости от стороны скроллинга) Можешь посмотреть на библиотеку FullPage.js или вообще ее использовать :)

READ ALSO
Почему SVG никак не реагирует?

Почему SVG никак не реагирует?

Хочу плавно отрисовать эту руку с калькулятором, нашел часть руки, её длину, но почему она никак не реагирует на изменений stroke-daharray и offset, причем...

174
Как правильно задать размеры SVG для фона

Как правильно задать размеры SVG для фона

Хочу сверстать на svg фоновую картинку, внутри самого svg будут разные деталиИдея в том, чтобы всю эту конструкцию без проблем можно было бы подогнать...

276
Чередование динамически блоков

Чередование динамически блоков

Привет всемВопрос такой может кто уже сталкивался есть такая верстка к примеру

155
Как развернуть вложенный блок на вессь экран по ширине?

Как развернуть вложенный блок на вессь экран по ширине?

Как сделать, чтобы зеленый блок развернулся на весь экран по ширине, при условии, что его нельзя менять его вложенность относительно того...

187