Um auf längeren Webseiten wieder zum Seitenanfang zu gelangen, oder um zwischen verschiedenen Elementen einer Seite hin und her zu scrollen, setzt man Ankerpunkte (z.B. #top). Um die normalerweise abrupten Seiten-Scrolls zu verschönern, kann man mit Hilfe der Javascript-Library Jquery sogenannte Smooth-Scrolls (seichte Scrolls) einsetzen.
Eine Demo eines solchen Smooth-Scrolls kannst du dir auf der Webseite CSS-Tricks ansehen.
Und so integrierst du den Smooth-Scroll Effekt auf deiner eigenen Webseite:
1. Setzte deine Ankerpunkte, z.B. ganz oben auf deiner Seite:
<a name="top" id="top"></a>
2. JQeury downloaden
Auf der JQuery-Webseite findest du die neusten Versionen der JQeury-Library zum runterladen. Downloade JQuery, und lade es in einem Ordner auf deinem Server hoch. Rufe dann die QJuery-Library im head-Tag deiner Webseite auf. Alternativ kannst du auch direkt auf die JQuery-Library auf dem Google-Server linken:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
3. Javascript Code einfügen
Speicher folgenden Code in eine Javascript-Datei mit dem Namen »smoothscroll«, und lade diese ebenfalls in deinen js-Ordner:
$(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&amp;&amp; location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length &amp;&amp; $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
4. Code im head-Tag aufrufen
Um den SmoothScroll-Code auf deiner Webseite aufzurufen, fügst du jetzt noch folgenden Code in den Head-Tag ein:
<script type="text/javascript" src="js/smoothscroll.js"></script>
Und das war’s auch schon! Linkst du jetzt von einem Punkt deiner Webseite auf den Ankerpunkt #top, scrollt deine Seite elegant nach oben.
Ich finde den Smooth-Scroll eine sehr elegante und benutzerfreundliche Methode, um auf einer Webseite zu navigieren. Die SmoothScroll-Methode ist z.B. auch bei Single-Page-Webseiten besonders gefragt. Hier ein besonders schönes Beispiel!
Kennst du weitere schöne Webseiten mit tollen Scroll-Effkten? Welche Javascript-Effekte gefallen dir besonders? Schreib mir doch einen Kommentar, ich freue mich schon auf dein Feeback!
Ja dieses Smooth Scrollen gefällt mir. Habe da auch auf meiner Site etwas eingebaut vor einiger Zeit. Einfach ein “Scroll to Top” wenn man nach unten scrollt. :) !
Hallo Dave,
vielen Dank für deinen Kommentar! Hey, das Scroll to Top auf deiner Seite sieht super aus :-) Mir gefällt das SmoothScrollen auch soooooooo viel besser!
Gruß Ellen
Schon wieder was gelernt :) Ein sehr schöner Effekt! Und wenn du beschreibst, wies geht, dann versteh ich das sogar. Vielen Dank für die hilfreiche Erklärung.
Hihi ;-) Vielen lieben Dank für deinen lieben Kommentar, Barbara! Die SmoothScrolls sind wirklich sehr leicht in eine Webseite einzubauen, aber der Effekt ist super angenehm!
Hi Ellen,
super erklärt aber in der smoothscroll.js hast du ein Fehler bzw ein Zeichen vergessen:
Geschrieben hast du:
$target = $target.length && $target || $(‘[name=' this.hash.slice(1) ']‘);
heißen muss es:
$target = $target.length && $target || $(‘[name=' + this.hash.slice(1) +']‘);
es fehlt ein “+” damit es funktioniert.
Gruß Jannis
Hallo Jannis,
vielen Dank für deinen Kommentar und für deinen wichtigen Hinweis. Sorry, dass ich den Code erst jetzt verbessert habe. Jetzt sollte es aber auf alle Fälle funktionieren :-)
Gruß Ellen
Habe gerade versucht es auf meiner Seite einzubinden, aber es funktioniert immer noch nicht. Nur so als kleiner Hinweis ;)
_______________________________________________
$(function(){
$(‘a[href*=#]‘).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”)
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $(‘[name=' + this.hash.slice(1) +']‘);
if ($target.length) {
var targetOffset = $target.offset().top;
$(‘html,body’).animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
________________________________________________
Damit hat es dann geklappt.
Grüße,Giulia
Hallo Giulia,
vielen herzlichen Dank für deine Hilfe und den Code-Schnipsel :-) Ich werde den Artikel auf jeden Fall gleich am Wochenende updaten, so dass die Anleitung wieder funktioniert.
1000 Dank und viele Grüße,
Ellen