Nachoben-Link / Sprungmarke erzeugen via JQuery

von Oliver Richter

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. 

Kommentare

Einen Kommentar schreiben

Bitte rechnen Sie 8 plus 6.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

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