Personal Homepage, Tutorials & Blog

Javascript: Sanfter Scroll-to-top Effekt

Javascript: Sanfter Scroll-to-top Effekt

21. März '10

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.js anpassen

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:

<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).

 

Wenn Ihnen dieser Artikel gefallen hat, oder Sie Anregungen/Kritik haben, würde ich mich freuen, wenn Sie einen Kommentar schreiben oder das RSS Feed abonnieren, um immer automatisch über die neuesten Artikel auf dieser Seite informiert zu werden. Sie dürfen diesen Artikel oder die gesamte Seite auch gerne verlinken.

6 Kommentare

  1. Guter Post, hat mir weiter geholfen und Arbeit erspart. Sonst findet man nur Jquery Plugins… aber habe was schlankeres gesucht 😀

    thx 😀

  2. hallo. ich habe das scrolltopcontrol.js auf meinen pc geladen und angepasst.auf dem server auf theme geklickt. dort finde ich dann neben forum, images und PSD auch js. In diesem habe ich dann zu mootools.js und side-bar.js den scrolltopcontrol.js zugefügt.
    und schon fangen die schwierigkeiten an.
    diese beiden zeilen:

    wohin sollen die zum ersten genau? in die temlates/header.php, oder theme/Tiger/header.php?
    und welche zeile 3 muss ggf angepasst werden, wenn der codeschnippsel nur azus 2 zeilen besteht ?
    ich kann das ding einfügen, wie und wo ich will, es funzt nicht.
    muss ich diese beiden zeilen noch durch echo verfolständigen, oder werden diese so wie sie sind, verwendet ??
    ich bekomme es jedenfalls nicht hin.
    LG Oldieman58

  3. Isabell /

    wie setzt man das ganze auch ohne jquery um?damit eben die Seite schneller geladen wird.

  4. Isabell /

    wie kann man denn das ganze auch ohne jquery umsetzen?
    Dann wäre die Seite viel schneller geladen, wenn man jquery sonst nicht braucht.

  5. arti /

    hallo,
    kann ich sowas auch mit menü-links in joomla 1.6 machen?
    möchte gern von einem menü-link zu einem anker scrollen.

    danke

    arti

Einen Kommentar schreiben