jQuery Scorrere fino alla prossima classe Div con il pulsante Successivo/Precedente

Question

Quello che mi piacerebbe è per la navigazione fissa, con i pulsanti NEXT e PREV per scorrere fondamentalmente la pagina al div successivo con la classe di "sezione".

Ho impostato jQuery per aggiungere essenzialmente una funzione di clic agli hrefs NEXT e PREV. Questa funzione di clic utilizzerà quindi ScrollTop per passare al prossimo duv con una classe di .section.

Ecco il jQuery:

$('div.section').first(); 
// binds a click event-handler to a elements whose class='display' 
$('a.display').on('click', function(e) { 
    // prevents the default action of the link 
    e.preventDefault(); 
    // assigns the text of the clicked-link to a variable for comparison purposes 
    var t = $(this).text(), 
     that = $(this); 
     console.log(that.next())  
     // checks if it was the 'next' link, and ensures there's a div to show after the currently-shown one 
     if (t === 'next' && that.next('div.section').length > 0) { 
     //Scroll Function 
     $('html, body').animate({scrollTop:that.next('div.section').scrollTop()}); 
    } 
    // exactly the same as above, but checking that it's the 'prev' link 
    else if (t === 'prev' && that.prev('div.section').length > 0) { 
     //Scroll Function 
     $('html, body').animate({scrollTop:that.prev('div.section').scrollTop()});  
    } 
}); 

Attualmente sto lavorando su JSfiddle con pesantemente commentato jQuery per aiutare a digerire: http://jsfiddle.net/ADsKH/1/

ho un console.log attualmente il controllo di (that.next ()) per determinare quale sarà la prossima sezione, ma mi restituirà risultati molto bizzarri.

Perché questo non funziona come previsto?

Answer 1

Il that non è in grado di trovare uno .next('.section') perché è annidato all'interno di .navigation.

Dalla documentazione jQuery per .next().

Ottieni il fratello immediatamente successivo di ciascun elemento nel set di elementi corrispondenti.

Here's a working example based on your code