InsertToc

Ziel

Für die Überschriften einer Seite soll automatisch ein Inhaltsverzeichnis mit Sprungmarken (Links) zu den Überschriften eingefügt werden.

Inhaltsverzeichnis mit verlinkten Sprungmarken.
Inhaltsverzeichnis mit verlinkten Sprungmarken.

Demo ansehen

Lösung

InsertToc ist ein schlankes jQuery-Plugin, das ein solches verlinktes Inhaltsverzeichnis für die Überschriften 2. Ordnung (<h2>) generiert und an die gewünschte Position einfügt.

Einbindung

Um InsertToc zu verwenden, müssen jQuery und die inserttoc.min.js in der Seite eingebunden sein.

1
2
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/inserttoc.min.js"></script>

Dann muss das Skript nur noch aufgerufen werden. Das Inhaltsverzeichnis wird sinnigerweise nur eingefügt, wenn es mehr als eine <h2> gibt. Folgender Standard-Aufruf fügt das Inhaltsverzeichnis nach der ersten <h1> im Dokument ein.

1
2
3
$(document).ready(function() {
    $(document).insertToc();
});

Konfiguration

Folgende Optionen können InsertToc mitgegeben werden. Diese überschreiben dann die Default-Eigenschaften.

Option Beschreibung Default-Wert
at Der Selektor des Elements, bei dem das Inhaltsverzeichnis eingefügt werden soll. 'h1:first'
position Wo das Inhaltsverzeichnis in Relation zum at-Element eingefügt werden soll. Mögliche Werte: 'after' | 'before' | 'intoAsFirst' | 'intoAsLast' 'after'

Wird InsertToc auf einem anderem Element als document aufgerufen, werden nur Überschriften in das Inhaltsverzeichnis aufgenommen, die zu diesem Element gehören (siehe Beispiele).

Beispiele

Inhaltsverzeichnis nach der Überschrift 1. Ordnung (<h1>) einfügen:

1
2
3
4
$(document).ready(function() {
    $(document).insertToc();
    // same as $(document).insertToc({at: 'h1:first', position: 'after'});
});

Inhaltsverzeichnis vor der ersten Überschrift 2. Ordnung (<h2>) einfügen:

1
2
3
$(document).ready(function() {
    $(document).insertToc({at: 'h2:first', position: 'before'});
});

Inhaltsverzeichnis als erstes Element in den Container mit der id 'container' einfügen:

1
2
3
$(document).ready(function() {
    $(document).insertToc({at: '#container', position: 'intoAsFirst'});
});

Inhaltsverzeichnis als letztes Element in den Container mit der id 'container' einfügen:

1
2
3
$(document).ready(function() {
    $(document).insertToc({at: '#container', position: 'intoAsLast'});
});

Inhaltsverzeichnis nur auf den Seiten einfügen, deren <body> die Klasse hastoc hat:

1
2
3
$(document).ready(function() {
    $('body.hastoc').insertToc();
});

Nur Überschriften innerhalb des Containers mit der CSS-Klasse 'mysection' im Inhaltsverzeichnis berücksichtigen:

1
2
3
$(document).ready(function() {
    $('.mysection').insertToc();
});

Downloads