Sie wollen ein Scroll-to-top Button auf Ihrer Seite installieren? Die Seite soll jedoch nicht nur einfach nach oben “springen”, sondern scrollen?

Hier erfahren Sie, wie Sie diesen Effekt (der z.B. auf dieser Seite zu sehen ist) einfach in Ihre Homepage einbauen.

Das Script stammt von der Seite dynamicdrive.com.

Download

Sie benötigen die Javascript-Datei und ein Bild, auf das später geklickt werden soll.
scrolltopcontrol.zip

scrolltopcontrol.js anpassen

1
2
3
4
5

setting: {startline:350, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://www.domain.tld/images/up.png" style="width:48px; height:48px" />',
controlattrs: {offsetx:3, offsety:0},
anchorkeyword: '#top',

Bearbeiten Sie den Code in Zeile 2. Ändern Sie www.domain.tld in Ihre Domain und passen Sie ggf. den Pfad zum Bild an. Wenn Sie ein anderes Bild verwenden, müssen Sie evtl auch noch die Bildgröße anpassen.
Die anderen drei Zeilen enthalten die Einstallungen für das Script. In Zeile 1 können Sie bestimmen, ab welcher Zeile der Button erscheinen soll. Ebenfalls können Sie bestimmen, wie schnell der Button eingeblendet werden und in welcher Geschwindigkeit gescrollt werden soll. Zeile 3 enthält die die Abstände der Grafik zum rechten und unteren Rand. Zeile 4 definiert den Namen des Ankers.

Hochladen und einbinden

Nachdem Sie die beiden Dateien hochgeladen haben, müssen Sie das Script noch in Ihre Seite integrieren. Dies geschieht im Header Ihrer Homepage, alse vor dem abschließenden -Tag.
Fügen Sie folgende Zeilen in Ihre Homepage ein:

1
2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scrolltopcontrol.js"></script>

Passen Sie ggf. den Pfad in Zeile 3 an.
Wenn Sie jetzt Ihre Homepage neu laden, sehen Sie rechts unten einen Scroll-to-top-Link (evtl. müssen Sie erst zum Ende Ihrer Website scrollen).