HTML Header für Slider

Update Tutorials

Thema: Anker setzen in HTML5

Zum Tutorial
Code Ansicht

Update Tutorials - Tricks & Tipps

Thema: PDF-Weiterleitungen mit PHP

Zum Tutorial

Anker setzen

Ahoi! Ihr seid beim Tutorial für`s "Anker setzen"! Nein, dies ist kein Tutorial für Seemänner, sondern ein einfaches aber nützliches Tutorial zum Thema Anker in HTML.

 

Ihr kennt sicher alle diese "Scroll-to-top"-Buttons welche beim runtersrollen auf einigen Seiten erscheinen. Mit einem Klick darauf könnt ihr wieder nach oben springen. Das ist recht praktisch. Diese Buttons sind in vielen Fällen nur einfache Ankerpunkte, welche mit ein bisschen Javascript aufgehübscht wurden.

 

Natürlich gibt es noch mehr Einsatzmöglichkeiten. Ich musste einmal für einen Kunden einen Link so preparieren, dass der User auf die verlinkte Seite und an eine bestimmte Stelle, weiter unten, geführt wurde.

Oder denkt einmal an Landingpages - diese funktionieren meistens auch über simple Ankernavigationen.

 

Was müsst ihr tun?

Um einen Anker zu setzen braucht ihr nur zwei Zeilen Code. Zuallererst erstellen wir einen Tag für die Stelle, an welche ihr springen wollt:

<a id="ankerziel">Ziel, an welches ich zurückkehren möchte</a>

Bitte beachtet: Früher war es nötig noch name="" mit zugeben. In HTML5 hat sich das jedoch erledigt. Es reicht die id zu vergeben.

Ihr könnt auch statt dem a-tag jedes beliebige nehmen. Ein Paragraph, ein Div-Container, eine Section...was immer ihr wollt.

 

Nun zum zweiten Bestandteil - der Link der uns zum Ankerziel bringt.

<a href="#ankerziel">Nach oben</a>

Wie ihr seht wird im href eine Raute mit dazugegeben. Dies liegt daran dass wir ja die ID ansteuern und diese wird ja grundsätzlich mit einer Raute begonnen (zb. im CSS).

Hier können wir leider immer nur ein a-tag benutzen. Andere Tags werden hier nicht funktionieren.

Und das war schon die gesamte Magie. Einfach, oder? Anker werden auch heute noch gerne verwendet - zu Recht.

 

Einen Scroll-to-Top-Button erstellen mit Animation

Für die Animation braucht ihr jquery. Ich werde euch jetzt nicht erklären wie jquery funktioniert (das würde den Rahmen deutlich sprengen, vorallem da dies ein leichtes Tutorial sein soll), aber ich zeige euch welche Parameter ihr anfassen müsst, um etwas zu verändern.

 

Diesmal braucht ihr keinen Ankerpunkt, da immer bis nach ganz oben gescrollt wird. Aber ihr braucht den Link, welcher euch bis nach oben bringt.

<a id="back2Top" title="Zurück zum Anfang scrollen" href="#">Nach oben scrollen</a>

Die ID "back2Top" dient hier vorallem der Zuordnung für jquery. Ändert ihr diese ID um, dann müsst ihr sie natürlich auch dort ändern.

Doch kommen wir erstmal zum jquery-code:

1. $(document).ready(function() {
2.    $(window).scroll(function() {
3.     var height = $(window).scrollTop();
4.     if (height > 500) {
5.         $('#back2Top').fadeIn();
6.     } else {
7.         $('#back2Top').fadeOut();
8.    }
9. });
10.
11.  $("#back2Top").click(function(event) {
12.   event.preventDefault();
13.    $("html, body").animate({ scrollTop: 0 }, "slow");
14.    return false;
15.   });
16. });

Zeile 4 zeigt an, ab welcher Höhe der Button angezeigt werden soll. Hier ist eingestellt dass er erst ab 500px Höhe erscheinen soll, damit er erst erscheint wenn es auch wirklich etwas zu scrollen gibt.

Zeile 13 zeigt an wohin gescrollt wird. Ihr seht "scrollTop: 0". Also zu 0px, was ja ganz oben ist. Auch hier könnt ihr etwas anderes eintragen.

 

TIPP: Natürlich dürft ihr im Javascriptcode die Zeilenbezifferung die ich hier gemacht habe nicht nehmen. Hier noch einmal der Code zum rauskopieren:

$(document).ready(function() {
    $(window).scroll(function() {
     var height = $(window).scrollTop();
     if (height > 500) {
         $('#back2Top').fadeIn();
     } else {
         $('#back2Top').fadeOut();
    }
 });

  $("#back2Top").click(function(event) {
   event.preventDefault();
    $("html, body").animate({ scrollTop: 0 }, "slow");
    return false;
   });
 });