How to use mouse wheel to go to next or previous section # in html

Question

I have a site with a top navigation menu :

<nav id="menu"> <ul id="menu-nav"> <li class="current"><a href="#home-slider">Home</a></li> <li><a href="#Cakes">Cakes</a></li> <li><a href="#Candy">Candy</a></li> <li><a href="#Marshmellow">Marshmellow</a></li> <li><a href="#Honey">Honey</a></li> </ul> </nav> 

And all my sections :

 <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 as usual. But I want him to jump to each section with one spin of the wheel without scrolling the entire page.

Answer 1

Without plugins, all we need to do is grab the mouse wheel using the mousewheel event - in Firefox we use DOMMouseScroll instead - and depending on the value of the originalEvent.wheelDelta -again event in Firefox this is originalEvent.detail , thanks Firefox - if that value positive , then the user scrolls up, if it is 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 do not want to use jQuery, the following is pure javascript code doing the same thing as above, this will not work in IE8 and lower 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 will need to connect a plugin to add the mousewheel event. Perhaps try this one this one . he got some pretty good examples.