Jump around!

Jump to topIch wurde gerade gefragt, wie das mit dem Pfeil am unteren rechten Bildschirmrand funktioniert. Der Pfeil, der selbst beim Scrollen auf seiner Position bleibt und einen per Klick wieder nach oben zum Seitenanfang befördert.

Im Grunde muss man dafür nur am Ende der Seite ein Bild einbauen – natürlich vor dem letzten </body> – und das Ganze dann mit CSS fixieren.

Ein Bild mit Link drumherum sieht folgendermaßen aus:

top

Damit der Link auch wirklich zum Seitenanfang springt, muss <body> so abgeändert werden:


CSS macht den Rest:

img#toparrow {
    position: fixed;
    right: 0px;
    bottom: 10px;
    border: 0;
}

Über right und bottom lässt sich der Abstand zum “Boden” und zum rechten Rand ändern.

Die entsprechende Grafik kann man sich hier herunterladen.