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?