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.
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
allowScrollingan, 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