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>
  1. Stellen Sie sicher, dass die JQuery-Bibliothek auf der Seite eingebunden und verfügbar ist.
  2. Fügen Sie das folgende Script z.B. am Ende des Seiteninhalts ein.
  3. Definieren Sie einen Selektor für die Elemente an (z.B. main article), unter denen ein Nachoben-Link eingefügt werden soll.
  4. 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 ID topheadline.
  5. 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. 

Zurück

Einen Kommentar schreiben

Bitte rechnen Sie 6 plus 3.

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.