Cómo agregar un desplazamiento jQuery scrollTop?

Intento hacer que el div se ajuste al centro de la window gráfica, ahora mismo se ajusta a la parte superior. Estaba tratando de poner una compensación del 50% pero solo puedo getla en px's.

EDITAR

$(window).scrollTop() / 2) un nuevo violín donde traté de include $(window).scrollTop() / 2)

http://jsfiddle.net/kZY9R/84/

$("#item").offset().top - 100

 var body = $("html, body"); var items = $(".item"); var animating = false; $(window).scroll(function() { clearTimeout($.data(this, 'scrollTimer')); if (!animating) { $.data(this, 'scrollTimer', setTimeout(function() { items.each(function(key, value) { if ($(value).offset().top > $(window).scrollTop()) { animating = true; $(body).stop().animate( { scrollTop: $(value).offset().top }, 1000,'swing'); setTimeout(function() { animating = false; }, 2000); return false; } }); }, 50)); } }); 

Aquí está el truco para mantener su window centralizada en un div particular.

Requisitos previos

Debe tener en count los siguientes tres criterios para poder centralizar la window gráfica en un item determinado:

  1. height del último elemento que apareció en la window gráfica.
  2. La distancia del último elemento desde la parte superior de la página, es decir, el offset().top del elemento.
  3. El valor de altura de la window gráfica (es decir, el object window ).

Cálculo de la position vertical del artículo

El valor requerido de scrollTop para la window se puede calcular de la siguiente manera:

 var scrollValue = itemOffset // offset of the item from the top of the page - .5 * windowHeight // half the height of the window + .5 * itemHeight; // half the height of the item 

Básicamente, mueves inicialmente la parte superior de la window gráfica al elemento que se encuentra debajo de la compensación superior . Esto, como ya lo ha experimentado, coloca el elemento en la parte superior de la window.

La verdadera parte mágica se produce cuando resta la mitad de la altura de la window para recorrerla verticalmente a la mitad, y luego baja la vista al agregar la mitad de la height del elemento. Esto hace que el elemento aparezca verticalmente centralizado con respecto a la window gráfica.

Nota:

Para poder consultar el último elemento que apareció en la window gráfica, debe iterar sobre todos los elementos que tienen un valor de desplazamiento superior (es decir, offset().top ) menor o igual que el valor de scrollTop de la window :

 $.each($('.item'), function(i, value) { if ($(viewport).scrollTop() >= $(this).offset().top) { lastItemInView = $(this); } }); 

Con lo anterior, la variable lastItemInView siempre terminará con el último elemento visible en la window.

Manifestación

Encontré esto:

 $('html, body').animate({scrollTop: $('#your-id').offset().top -100 }, 'slow'); 

Fuente: Ejecutar ScrollTop con desplazamiento del elemento por ID

No estoy seguro si ya descubrió esto o no, pero tomé un código de esta respuesta ( ¿Cómo saber si un elemento DOM está visible en la window gráfica actual? ) Que muestra cómo saber si un elemento está visible en el puerto de visualización.

Al usar eso, modifiqué tu código para recorrer cada elemento y encontrar el primero visible en la window gráfica y luego centrar el que también tiene en count el margin-top que tienes. ¡Déjeme saber si esto ayuda!

Fiddle: http://jsfiddle.net/kZY9R/86/

 var body = $("html, body"); var items = $(".item"); var animating = false; $(window).scroll(function() { clearTimeout($.data(this, 'scrollTimer')); if (!animating) { $.data(this, 'scrollTimer', setTimeout(function() { items.each(function(key, value) { if (elementInViewport(value)) { animating = true; var margin = parseInt($(value).css('margin-top')); $('html,body').animate({ scrollTop: $(value).offset().top - ($(window).height() + margin - $(value).outerHeight(true)) / 2 }, 200); setTimeout(function() { animating = false; }, 2000); return false; } }); }, 50)); } }); function elementInViewport(el) { var top = el.offsetTop; var left = el.offsetLeft; var width = el.offsetWidth; var height = el.offsetHeight; while (el.offsetParent) { el = el.offsetParent; top += el.offsetTop; left += el.offsetLeft; } return ( top < (window.pageYOffset + window.innerHeight) && left < (window.pageXOffset + window.innerWidth) && (top + height) > window.pageYOffset && (left + width) > window.pageXOffset ); }