How to use Mouse Wheel for jumping to next or previous # section in html - html

Question

I have a site with top nav menu:
<nav id="menu">
<ul id="menu-nav">
<li class="current">Home</li>
<li>Cakes</li>
<li>Candy</li>
<li>Marshmellow</li>
<li>Honey</li>
</ul>
</nav>
And all my sections are:
<div id="Cakes" class="page">
<div class="container">
This is sweet
</div>
</div>
How can I use the mouse wheel to jump directly to the next or previous section?
Currently the mouse wheel will scroll the page like normal. But I want it to jump to every section with one wheel rotation without scrolling all the entire page.

Answer 1

Without plugins, all we need to do is to capture the mousewheel using mousewheel event -on Firefox we use DOMMouseScroll instead- and depending on the value of the event's originalEvent.wheelDelta -again in Firefox it is originalEvent.detail, thanks Firefox- if this value is positive then the user is scrolling upward, if it's negative then the direction is down.
JS Fiddle 1
jQuery (1) :
//initialize
var winHeight = $(window).height(),
pages = $('.page'),
navLinks = $('#menu-nav a'),
currentPage = 0;
$('html, body').animate({ scrollTop: 0}, 0);
// listen to the mousewheel scroll
$(window).on('mousewheel DOMMouseScroll', function(e){
//by default set the direction to DOWN
var direction = 'down',
$th = $(this),
// depending on the currentPage value we determine the page offset
currentPageOffset = currentPage * winHeight;
// if the value of these properties of the even is positive then the direction is UP
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
direction = 'up';
}
// if the direction is DOWN and the currentPage increasing won't exceed
// the number of PAGES divs, then we scroll downward and increase the value
// of currentPage for further calculations.
if(direction == 'down' && currentPage <= pages.length - 2){
$th.scrollTop(currentPageOffset + winHeight);
currentPage++;
} else if(direction == 'up' && currentPage >= 0) {
// else scroll up and decrease the value of currentPage IF the direction
// is UP and we're not on the very first slide
$th.scrollTop(currentPageOffset - winHeight);
currentPage--;
}
});
// as final step we need to update the value of currenPage upon the clicking of the
// navbar links to insure having correct value of currentPage
navLinks.each(function(index){
$(this).on('click', function(){
navLinks.parent().removeClass('current');
$(this).parent().addClass('current');
currentPage = index;
});
});
(1) UPDATE
If you don't want to use jQuery, below is pure javascript code doing the same as above, this won't work in IE8 and below though:
JS Fiddle 2
Pure Javascript:
//initialize
var winHeight = window.innerHeight,
pages = document.getElementsByClassName('page'),
navLinks = document.querySelectorAll('#menu-nav a'),
currentPage = 0;
window.addEventListener('mousewheel', function(e) {
scrollPages(e.wheelDelta);
});
window.addEventListener('DOMMouseScroll', function(e) {
scrollPages(-1 * e.detail);
});
function scrollPages(delta) {
var direction = (delta > 0) ? 'up' : 'down',
currentPageOffset = currentPage * winHeight;
if (direction == 'down' && currentPage <= pages.length - 2) {
window.scrollTo(0, currentPageOffset + winHeight);
currentPage++;
} else if (direction == 'up' && currentPage > 0) {
window.scrollTo(0, currentPageOffset - winHeight);
currentPage--;
}
}
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', updateNav(i));
}
function updateNav(i) {
return function() {
for (var j = 0; j < navLinks.length; j++) {
navLinks[j].parentNode.classList.remove('current');
}
navLinks[i].parentNode.classList.add('current');
currentPage = i;
}
}

Answer 2

You'll need to get a plug-in to add the mousewheel event.
Maybe try this one this.
it's got pretty good examples.