Dynamisches Inhaltsverzeichnis mit jQuery

Neulich hatten wir hier ein einfaches Glossar mit WordPress-Bordmitteln im Editor erstellt. Heute gibt‘s die Automatisierung! Das folgende jQuery-Schnäppchen generiert ein Inhaltsverzeichnis aller auf der Seite befindlichen Überschriften, inklusive klickbarer Links und weichem Scroll-Effekt.

Vorteil: Das Inhaltsverzeichnis braucht nicht mit gepflegt zu werden. Auch die IDs der Überschriften passieren von alleine – komfortabel für Freunde des WYSIWYG-Editors!

Selektoren

Vielleicht wird irgendwann mal ein echtes jQuery-Plugin draus; momentan stehen die relevanten Selektoren noch fix im Code und müssen bei Bedarf dort angepasst werden.

.entry-content – das Element für den Hauptinhalt der Seite bzw. des Artikels
.entry-content h3 – alle Überschriften 3. Ordnung im Seiteninhalt werden abgefragt
#indexitem-1[,2,3…] – dynamisch erstellte IDs für die vorhandenen <h3>-Elemente
.indexlist – CSS-Klasse der dynamisch erstellen Liste
.indexlist a – Selektor für den Scroll-Effekt; Zeile einfach auskommentieren, wenn nicht erwünscht
.before( '<br /><hr />' ) – fügt vor jeder Überschrift ein <hr>-Element ein; bitte ebenfalls einfach auskommentieren oder löschen, wenn nicht erwünscht

Der folgende Code gehört in eine Javascript-Datei, oder optional (innerhalb von <script>-Tags) in den Footer der Seite. Nicht vergessen: jQuery sollte bereits geladen sein! 😉

;(function ($) {
	$(document).ready(function(){

		$( '.entry-content' ).prepend('<ul class=""indexlist""></ul>');
		$( $( '.entry-content h3' ).get().reverse() ).each(function(index){
			var itemindex = ( index + 1 );
			$( this ).attr( 'id', 'indexitem-' + itemindex ).before( '<br /><hr />' );
			$( '.indexlist' ).prepend( '<li><a>' + $( this ).text() + '</a></li>' );
			$( '.indexlist a' ).inlineScrolling();
		});
	}

	/* Funktion für sanftes Scrolling */
	$.fn.inlineScrolling = function(options) {

		return this.each(function(event) {

			var $this = $(this);

			$this.on('click', $this, function(event) {
				var scrollTarget = $( '#' + this.href.split( '#' )[ 1 ] ).offset().top;
				$( 'html, body' ).animate( { scrollTop : scrollTarget }, 250);
				event.preventDefault();
				return false;
			});
		});
	}
}(jQuery));

Ergebnis

Das fertig generierte, dynamische Inhaltsverzeichnis kann z.B. so aussehen: