How can I make this inverted scrolling script work more efficiently?

Question

The webpage I'm designing is very tall and loads in at the bottom. I need the scrolling to be inverted so visitors won't have to scroll up to get to the top. The script I'm using doesn't fully prevent normal scrolling and causes some issues:

function onScroll(velocity) {
  var win = $(window)  
  $(win).on('wheel', function(event) {
    event.preventDefault()
    var direction = event.originalEvent.deltaY > 0? 'down': 'up';    
    var position = win.scrollTop();

    if (direction === 'up') {
        $('html, body').animate({
            scrollTop: (position + velocity)
        }, 40);
    }
    else if (direction === 'down') {
        $('html, body').animate({
            scrollTop: (position - velocity)
        }, 40);
    }
  })
}
onScroll(70);

What adjustments could be made to the script to streamline the process?

Answer 1

You don't necessarily need jQuery.
Here's an example using pure JavaScript to invert the "wheel" scroll direction:

const elScroll = document.documentElement;

elScroll.addEventListener("wheel", (evt) => {

  evt.preventDefault();
  const delta = Math.sign(-evt.deltaY);
  
  elScroll.scrollBy({
    top: 70 * delta,
    // behavior: "smooth" // will not work I'm afraid
  });
  
}, { passive: false });

body {
  border: 3px dashed;
  height: 300vh;
}

Wheel-up to scroll down, and vice-versa

Sadly the option behavior: "smooth" will not work correctly with the above. For animations to work you'll have to find another workaround.