I have this scroll animation that moves a div up and down simulating a scroll, why is there a difference in behaviour from the up and down movement?

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/

when moving the #bottom up it seems like it starts from where you end your scroll input, this behaviour is not wanted.

I want the same movement as when you roll the wheel from bottom to top

Also, I need to stop overlapping inputs while the animation is active, this problem causes glitches.

Thank you for the help.

EDIT: WTF I think I've solved it with a body {overflow:hidden;} Maybe the possibility to scroll was messing up with the general animation.

By the way I would like to listen if there's something more to know about it. Thank you.