animiert zu Sprungmarke scrollen

Tutorial HTML Sprungmarke / Anker mit scroll Effekt

Mit wenig jquery Code kann mit einem animierten Scroll Effekt zu einer HTML Sprungmarke gescrollt werden.
Hierfür .

Beispielseite

Beispielseite ansehen

Als erstes muss die jquery Bibliothek im HTML Dokument eingebunden werden z.B. im Head-Bereich.

jquery Bibliothek einbinden

Als zweites wird der jquery ankerscroll Code eingebunden

jquery ankerscroll Code einbinden

Nun kann mit diesem HTML Code-Schnipsel eine animierte Sprungmarke in das HTML-Dokument eingefügt werden.

HTML Anker / Sprungmarken Code

Sprungmarken Scroll Beispiel <a href="#Ankername">"Ich scrolle animiert zur definierten Sprungmarke"</a>

Text blabla (Text sollte um den Effekt besser zu sehen über mehrere Zeilen gehen).

<h2 id="Ankername">Ich bin das Ziel der animierten Sprungmmarke</h2>

So das war nun schon die ganze Hexerei ;)
Viel Spass beim Anwenden.

Download

ankerscroll.zip

Enthaltene Dateien:

ankerscroll.js
Beispielseite.html
jquery-2.1.4.min.js

Hinweis

Für dieses Beispiel müssen sich alle Dateien im selben Verzeichnis befinden.

Vorsicht

Die Anker-ID darf sich nicht in einem Element mit einer definierten ID wie z.B. einem Div mit ID befinden, hierfür müsste die ID des Div's in ein class umgewandelt werden.

letztes Update 14. Oktober 2015

Kommentare

Hier können sowohl Fragen wie auch ein Feedback zum oben stehenden Artikel eingetragen werden.

Hinweis:
Der Eintrag wird nach einer redaktionellen Prüfung in den kommenden Tagen freigeschalten.

Top Themen

Suche

DoubleTwist

iTunes mit Android Handy synchronisieren

Free YouTube Video Music

gratis Musik für Youtube Videos

Spenden

ROG Innovation unterstützen