Change Scroll Behavior: Scroll in Increments of 100vh

Question

My website's main page has 9 sections.

Each section is a div element with a height of 100vh.

When the user scrolls the page, I want the page to scroll in increments of 100vh, rather than the normal scroll behavior.

What is the Javascript/Jquery code to change the normal scroll behavior in order to make the page scroll in increments of 100vh?

Answer 1

Here is how you can set your scroll to 100 px at a time. As to direction and speed you have to get a little creative I'd suggest using a timeout for the second one. Hope this helps!

 $body = $('body');
 $body.css('overflow', 'hidden');
 $body.bind('mousewheel', function(e){
   $body.scrollTop($body.scrollTop() + 100);
 });