Update zum Thema Smooth Scroll
Im Artikel „Back-to-Top Buttons mit Smooth Scroll und Fading in WordPress verwenden“ findest du eine aktuellere Bearbeitung zum Thema Smooth Scroll. Außerdem wird hier noch ein praktischen WordPress-Plugin vorgestellt. Schau doch mal rein!

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:
[php]
<a name="top" id="top"></a>
[/php]
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:

[php]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
[/php]
3. Javascript Code einfügen

Speicher folgenden Code in eine Javascript-Datei mit dem Namen »smoothscroll«, und lade diese ebenfalls in deinen js-Ordner:

[php]
$(function(){
$(‚a[href*=#]‘).click(function() {
if (location.pathname.replace(/^\//,“) == this.pathname.replace(/^\//,“)
&amp;amp;&amp;amp; location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length &amp;amp;&amp;amp; $target || $(‚[name=‘ + this.hash.slice(1) +‘]‘);
if ($target.length) {
var targetOffset = $target.offset().top;
$(‚html,body‘).animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
[/php]
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:

[php]
<script type="text/javascript" src="js/smoothscroll.js"></script>
[/php]

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!