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.

2 thoughts on “Jump around!”

  1. Vielen Dank Felix,
    habe es eben bei mir eingebaut.

    Noch zwei Hinweise für WP-User:
    Das öffenende Body findet man in der Header.php
    das schließende in der Footer.php

    Die css-Angaben natürlich in der style.css

    Schönen Gruß
    Gorden

Comments are closed.