Tengo un carrusel de fotografías con efecto parallax montado en Bootstrap. Quiero conseguir que cuando el usuario hace scroll hacia abajo en una diapositiva, forzar la página a que baje hasta abajo, y cuando el usuario hace scroll hacia arriba, forzar la página a que suba hasta arriba. Aquí tenéis una imagen que ilustra el comportamiento que quiero obtener:
Os adjunto un CodePen para que veáis lo que tengo montado hasta ahora (enlace a CodePen). Como podéis ver, cuando hacéis scroll hacia abajo, aparece el "caption slide". El problema es que si haces muy poco scroll, el "caption slide" queda a la mitad... Lo que yo quiero conseguir es detectar la dirección del scroll y forzar la página a que baje o suba del todo, de tal forma que el "caption slide" se muestre entero o no se muestre, pero que nunca se muestre una parte nada más.
La detección de la dirección la tengo hecha, pero lo que no tengo narices de hacer es lo de forzar el scroll. Aquí tenéis parte del código jQuery que me detecta la dirección:
$(function(){
var _top = $(window).scrollTop();
var _direction;
$(window).scroll(function(){
var _cur_top = $(window).scrollTop();
if(_top < _cur_top)
{
_direction = 'down';
}
else
{
_direction = 'up';
}
_top = _cur_top;
console.log(_direction);
});
});
A partir de aquí estoy perdido... he buscado en internet y no hay manera. Ni si quiera sé como se llama técnicamente lo que quiero hacer!! Scroll Hijacking???
Toda ayuda será bienvenida. Muchas gracias!! Saludos
Scroll Hijacking
sinoscroll jquery animate