Nachoben-Link/Sprungmarke via JS erzeugen

HTML

<html>
  <head>
    <title>Gruenfisch Webdesign</title>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  </head>
  <body>
    <header><h1 id="topheadline">Headline</h1></header>
    <main>
      <article>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit...

CSS

body { background: #eeeeee; color: #333333; font-family: monospace; font-size: 12px; }
    strong { color: #2673ff; }
    em { color: #ff0000; font-style: normal; }
    
	#wrapper { max-width: 1000px; margin: 0 auto; background: #ffffff; }
	
	/* Siehe https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/grid und http://alistapart.com/article/the-new-css-layout-excerpt*/
	
	.g1 {
		display: grid; 								/* grid design aktivieren */
		grid-template-columns: 1fr 2fr 1fr; 		/* Spalten definieren (fr = Bruchteil 1:2:1 - Aufteilung passiert automatisch) */
		/*grid-template-rows: 150px 1fr 1fr 100px;*/	/* auch eine Kombination von statischen und dynamischen Werten scheint möglich */
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		grid-gap: 20px
		
	}

JavaScript

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 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'});             
        });        
    } 
});