jQuery Blättern Sie mit der Taste Weiter / Zurück zur nächsten Div-Klasse

Was ich möchte, ist für die feste Navigation mit den NEXT- und PREV-Tasten, um im Grunde die Seite zum nächsten Div mit der Klasse "Abschnitt" zu scrollen.

Ich habe jQuery so eingerichtet, dass im Wesentlichen eine Klickfunktion zu den NEXT- und PREV-Hrefs hinzugefügt wird. Diese Klickfunktion verwendet dann ScrollTop, um mit einer Klasse von .section zum nächsten duv zu gelangen.

Hier ist die 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()});     
  }
});

Ich arbeite derzeit an JSfiddle mit stark kommentiertem jQuery, um Ihnen bei der Verdauung zu helfen:http://jsfiddle.net/ADsKH/1/

Ich habe eine console.log-Datei, die derzeit nach (that.next ()) sucht, um festzustellen, wie der nächste Abschnitt aussehen wird, aber sie gibt mir einige sehr seltsame Ergebnisse zurück.

Warum funktioniert das nicht wie vorgesehen?

Antworten auf die Frage(1)

Ihre Antwort auf die Frage