ROG Innovation Logo

Tutorials, Gadgets und vieles mehr - Idea. Creation. Success. - Let's create the future!

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
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>


Als zweites wird der jquery ankerscroll Code eingebunden

jquery ankerscroll Code einbinden
<script type="text/javascript" src="ankerscroll.js"></script>


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.


jquery Ankerscroll 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.



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


*Name:


*Kommentar:

(max. 500 Zeichen)

Terms:


*Pflichtfeld

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

Top Themen

Suche
DoubleTwist
doubletwist iTunes mit Android Handy synchronisieren
Free YouTube Video Music
Youtube gratis Musik für Youtube Videos
Anzeige
Spenden
ROG Innovation unterstützen