Come usare la rotella del mouse per saltare al successivo o precedente sezione # in html

Question

Ho un sito con Top Menu nav:

<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> 

E tutti i miei sezioni sono:

<div id="Cakes" class="page"> 
    <div class="container"> 
     This is sweet 
    </div> 
</div> 

Come posso utilizzare la rotellina del mouse per passare direttamente alla sezione successiva o precedente?

Attualmente la rotellina del mouse scorre la pagina normalmente. Ma voglio che passi a tutte le sezioni con una rotazione della ruota senza scorrere tutta la pagina.

Answer 1

Avrai bisogno di ottenere un plug-in per aggiungere l'evento della rotellina del mouse. Forse prova questo this. ci sono esempi abbastanza buoni.

Answer 2

senza plugin, tutto quello che dobbiamo fare è quello di catturare la rotellina del mouse utilizzando mousewheel evento - su Firefox usiamo DOMMouseScroll invece - e in funzione del valore della manifestazione originalEvent.wheelDelta-di nuovo in Firefox è originalEvent.detail, grazie Firefox - se questo valore è positivo quindi l'utente sta scorrendo verso l'alto, se è negativo allora la direzione è verso il basso.

JS Fiddle 1

jQuery ⁽⁾:

//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; 
    }); 
}); 

---

⁽⁾AGGIORNAMENTO

Se non si desidera utilizzare jQuery, qui di seguito è puro codice javascript fare lo stesso come sopra, questo non funzionerà in IE8 e al di sotto però:

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; 
    } 
}