Das 'Nach-Oben-Ding' oder 'scrollTop' oder 'Wie man zum Seitenanfang nach oben scrollt'

Beim Scrollen auf meinem Blog nach unten erscheint ab einem bestimmten Punkt links und rechts unten ein Link, mit dem man wieder zum Seitenanfang zurückscrollen kann, wenn man darauf klickt. Bei mir heißen die Links "Zum Anfang".

Zur Durchführung dieser Aufgabe werden drei Teile benötigt:

• Ein Script-Teil, der dafür sorgt, dass die Links erst einmal nicht angezeigt werden, sondern erst ab einer gewissen Strecke, nachdem man nach unten gescrollt ist. Das Script sorgt auch beim Klicken auf einen Link dafür, dass die Anzeige nicht plötzlich nach oben springt, sondern dass nach oben ge­scrollt wird. (Z.B. Scroll-Geschwindigkeit)
• Ein CSS-Teil, in dem eingestellt wird, wie der Stil der Links aussehen sollen. (Z.B. Farbe)
• Ein HTML-Teil, wie der Inhalt der Links sein soll. (Z.B. Text)

Hier ist der Tipp, wie es gemacht wird:

Zuerst fügt man im Layout-Modus als Gadget eine neue HTML-Box hinzu.
(Ich habe sie bei mir unten auf der Seite untergebracht, weil ich sie dann am leichtesten finde, falls ich etwas verändern möchte.)

Dort wird folgender Code eingefügt (der Teil zwischen den Strichen):

------------------------------

<!-- Script-Teil zum Anzeigen der Links und zum Scrollen nach oben -->

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">

</script>

<script>
    $(document).ready(function(){
        // hide #floatlinkRL first - floatlinkRL zuerst verstecken
        $("#floatlinkR").hide();
        $("#floatlinkL").hide();
        //'500': point of appearance in px - Punkt des Sichtbarwerdens in px
         $(function () {
             $(window).scroll(function () {
                if ($(this).scrollTop() > 500) {
                    $('#floatlinkR').fadeIn();
                    $('#floatlinkL').fadeIn();
                } else {
                    $('#floatlinkR').fadeOut();
                    $('#floatlinkL').fadeOut();
                }
            });

            // '2000' the time of scrolling in ms - Zeit für das Scrollen in Millisekunden
            $('#floatlinkR a').click(function () {
                 $('body,html').animate({
                    scrollTop: 0
                }, 2000);
                return false;
            });
            $('#floatlinkL a').click(function () {
                 $('body,html').animate({
                    scrollTop: 0
                }, 2000);
                return false;
            });
        });
    });
    </script>

<!-- CSS-Teil, Festlegen des Aussehens der Links -->

<style>
    #floatlinkR {
    position:fixed;
    right: 20px;
    bottom: 10px;
    z-index:10;
    font: bold 12px Georgia;
    letter-spacing: 0.2em;}
    #floatlinkR a:link {
    color:#39875f;
    text-decoration:none;}
    #floatlinkR a:hover {
    color:#69b78f;
    text-decoration:none;}
    #floatlinkR a:visited {
    color:#39875f
    text-decoration:none;}

    #floatlinkL {
    position:fixed;
    left: 20px;
    bottom: 10px;
    z-index:10;
    font: bold 12px Georgia;
    letter-spacing: 0.2em;}
    #floatlinkL a:link {
    color:#39875f;
    text-decoration:none;}
    #floatlinkL a:hover {
    color:#69b78f;
    text-decoration:none;}
    #floatlinkL a:visited {
    color:#39875f
    text-decoration:none;}
    </style>

<!-- HTML-Teil, Anzeige der Links -->

    <div id="floatlinkR">
    <a href="#">&uarr; Zum Anfang &uarr;</a></div>
    <div id="floatlinkL">
    <a href="#">&uarr; Zum Anfang &uarr;</a></div>

------------------------------

Hinweise:

Die Kommentare zwischen "<!--" und "-->" brauchen nicht übernommen zu werden, sind aber vielleicht ganz hilfreich, wenn man später noch mal etwas verändern möchte.
Ich habe sie daher zum besseren Verständnis eingefügt.

Wenn man den Script-Teil fortlässt, werden die Links permanent am unteren Rand des Fensters angezeigt, und beim Klick darauf wird direkt an den Anfang der Seite gesprungen.

Bei mir sind für das Scrollen nach oben zum Seitenanfang 2000 ms, also 2 Sekunden, eingestellt. Meine Seite ist allerdings auch sehr lang. Bei kürzeren Seiten wird dann entsprechend langsamer gescrollt, eben immer in 2 Sekunden. Dort könnte man die Zeit eventuell verkürzen, d.h., einen kleineren Wert eingeben.

Bei mir werden die Links sichtbar, wenn die Seite 500 px nach unten gescrollt wurde. Auch dieser Wert kann für den eigenen Blog verändert werden. Das muss oder kann man austesten.

Die Farbeinstellungen im CSS-Teil bei
color:
müssen an die Farben des eigenen Blogs angepasst werden.
a:link und a:visited sollten gleich sein, denn es macht ja keinen Sinn, den Link als 'besuchten' Link anders einzufärben.
Die Farbe a:hover kann unterschiedlich sein, damit man sieht, dass dies ein aktiver Link ist.

Im HTML-Teil tauchen die Zeichen"&uarr;" auf.
Das sind nur die HTML-Codes für die Zeichen "↑" (Pfeil nach oben).
.....

Vom programmiertechnischen aus gesehen ist es ein bisschen 'unsauber', dass alles in einer HTML-Box untergebracht ist: Script, CSS und HTML.

Aber es hat den Vorteil, dass man nach Herzenslust mit den Werten herumspielen kann, bis man die passenden Einstellungen für den eigenen Blog gefunden hat, ohne Gefahr , etwas am HTML-Code des Blog-Designs kaputtzumachen.
Außerdem funktioniert es dann bei jedem Design, ohne dass man z.B. im Code zuerst den CSS-Bereich herausfnden muss.
Notfalls löscht man die HTML-Box einfach und macht alles noch einmal neu.

Viel Erfolg beim Ausprobieren und Anpassen!