Scrolling absatzweise

Hier eine Abwandlung der Scroll-Routine. Der Text wird absatzweise gescrollt. Außerdem habe ich mit einer Lesehilfe experimentiert und den Text zoombar gemacht.
Im ersten scroll-Artikel wurde der Inhalt mit jQuery und dem scrollTo-Plugin pixelweise gescrollt. Diesmal soll sich das Scrollen am Inhalt orientieren und absatzweise scrollen.

Struktur finden

Wie kann ich durch eine unbekannte Anzahl Elemente scrollen, die nicht nummeriert sind? Mit jQuery gibt es dafür mehrere Lösungen:

• Ersten finden, dann mit .prev und .next arbeiten
• Liste erstellen
• Nummerierte Klassen vergeben

Ich habe mich für die dritte Möglichkeit entschieden. Zu Beginn werden die entsprechenden Absätze mit Klassennamen versehen und erhalten dadurch einen Identitifier, der eventuell vorhandene Id's nicht überschreibt und trotzdem jeden Absatz individuell adressierbar macht. Mit jQuery ein Klacks:

$(document).ready( function() {
  $("#scrollcontent").scrollTop(0);   // anfangsposition setzen
  paras = $('#scrollcontent p');      // alle <p>-Elemente holen
  paras.each(function(index) {        // 'index' wird von jQuery gefüllt
    $(this).addClass('scroll_'+index);  // klassennamen basteln
    maxpara = index;                  // maxpara mitlaufen lassen
  });
  aktpara = 0; //aktueller paragraph

(Die Variablen sind weiter oben im Originaltext definiert.)

Nach der Ausführung dieser Schritte hat jeder Absatz im Zielcontainer scrollcontent einen Klassennamen, der sich aus scroll_ und einer Nummer zusammensetzt, also scroll_0, scroll_1, scroll_2 etc.
Diese können dann mit .scrollto direkt angefahren werden:

$("#scrollcontent").scrollTo($('.scroll_'+aktpara),150,{ axis:"y", offset:-64});

aktpara ist dabei eine Zahl zwischen 0 und maxpara. Bei jedem Scrollvorgang wird diese Variable mitgeführt. So sieht die scroll-Routine jetzt aus:

function scrolly( whichdirection ) {
 oldakt = aktpara; // in oldakt den zuletzt aktiven speichern, um hilight entfernen zu können 
 var dir = '0';
 dir = (whichdirection == 'up')? -1 : +1;
 aktpara = aktpara+dir;
 if (aktpara >= maxpara) {
  aktpara = maxpara-1;
 }
 if (aktpara < 0) {
  aktpara = 0;
  return;
 }
 $("#scrollcontent").scrollTo($('.scroll_'+aktpara),150,{ axis:"y", offset:-64});
}

Mit dem offset wird erreicht, daß der Absatz in der Mitte des Containers angezeigt wird und nicht ganz oben klebt. Dieser Wert muss in anderen Projekten angepasst oder berechnet werden.
Hier gibt es Demo und Quelltext.
Tja, und wenn wir schon die Absätze so schön durchnummeriert haben, könnten wir doch auch gleich über einen Index nachdenken und ein Menü anbieten...
Das findet ihr hier: Automatischer Index mit jQuery Der Artikel dazu folgt auch demnächst :O)