Nachoben-Link / Sprungmarke erzeugen via JQuery
von Oliver Richter (Kommentare: 0)
Nachträgliches Erzeugen von Totop-/Nachoben-Links für Inhaltselemente
Ein kleines JavaScript auf JQuery-Basis zum nachträglichen Erzeugen von Nachoben-Links für Inhaltselemente. Mal davon ausgehend, dass in etwa die folgende HTML-Struktur vorliegt:
<html> <head>...</head> <body> <header><h1 id="topheadline">Headline</h1></header> <main> <article><p>...</p></article> <article><p>...</p></article> <article><p>...</p></article> <article><p>...</p></article> </main> </body> </html>
- Stellen Sie sicher, dass die JQuery-Bibliothek auf der Seite eingebunden und verfügbar ist.
- Fügen Sie das folgende Script z.B. am Ende des Seiteninhalts ein.
- Definieren Sie einen Selektor für die Elemente an (z.B.
), unter denen ein Nachoben-Link eingefügt werden soll.main article
- Geben Sie die einen Selektor und/oder ID des Elementes an, zu dem gescrollt/gesprungen werden soll (Link-Ziel). In meinem Beispiel ist eine
<h1>
mit der IDtopheadline
.
- Optional geben Sie im Script durch definieren der Variable
allowScrolling
an, ob der Link angesprungen (allowScrolling = false;
) oder angescrollt (allowScrolling = true;
) werden soll.
jQuery(document).ready(function($) { // Definieren der Selektoren var contentElementSelector = 'main article'; // Inhaltselemente, denen der Top-Link angehangen werden soll var topSelector = 'h1#topheadline'; // Top-Anker-Element (link target) // Scrollverhalten var allowScrolling = true; //enable/disable scrolling if ( ($(contentElementSelector).length > 0) && ($(topSelector).length > 0) ) { // Top-Link-Labels (versch. Sprachen) var lang; var topLinkLabel = []; topLinkLabel['de'] = 'Zum Seitenanfang'; topLinkLabel['en'] = 'Jump to top'; // Sprache bestimmen try { lang = (navigator.language || navigator.userLanguage).toLowerCase().slice(0,2); } catch(e) { lang = 'en'; } $(contentElementSelector).each(function( index ) { // Top-Link erzeugen, Funktion Klickevent manipulieren, einhängen, manteln var topTopLink = $('<a />', { 'href': topSelector, 'text': topLinkLabel[lang], 'title': topLinkLabel[lang] }); if (allowScrolling) { $(topTopLink).on('click', function(event){ event.preventDefault(); $('html, body').animate({scrollTop: $(topSelector).offset().top}, 1000); return false; }); } $(topTopLink).appendTo( $(this) ); $(topTopLink).wrap('<p />', { 'class': 'totoplink'}); }); } });
Hier der Link zum Live-Test.
Sie befinden Sich in der Detailansicht eines Blog-Eintrags.
Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.
Einen Kommentar schreiben