Tengo esta animación de desplazamiento que mueve un div hacia arriba y hacia abajo simulando un desplazamiento, ¿por qué hay una diferencia en el comportamiento del movimiento hacia arriba y hacia abajo?

 let position = ''; let scrolling = false; let animationDuration = 800; let position = ''; let scrolling = false; let animationDuration = 800; $(window).bind('mousewheel', function(event) { if (event.originalEvent.wheelDelta > 0) { // scroll up if (scrolling || position === 'top') return; scrolling = true; position = 'top'; $('#bottom').stop().animate({ top: "100vh" }, animationDuration, 'linear', function() { scrolling = false; }, ); } else { if (scrolling || position === 'bottom') return; scrolling = true; position = 'bottom'; $('#bottom').stop().animate({ top: "0" }, animationDuration, 'linear', function() { scrolling = false; }, ) } })

https://jsfiddle.net/o4vg6f8y/1/

cuando mueve el #bottom hacia arriba, parece que comienza desde donde finaliza su entrada de desplazamiento, este comportamiento no es deseado.

Quiero el mismo movimiento que cuando giras la rueda de abajo hacia arriba

Además, necesito dejar de superponer entradas mientras la animación está activa, este problema provoca fallas.

Gracias por la ayuda.

EDITAR: WTF, creo que lo resolví con un cuerpo {overflow: hidden;} Tal vez la posibilidad de desplazarse estaba estropeando la animación general.

Por cierto, me gustaría escuchar si hay algo más que saber al respecto. Gracias.