Tipps und Tricks • 21.02.2008, 19:58 Uhr • Kommentare: 2

Jump to topIch wurde gerade gefragt, wie das mit dem Pfeil am unte­ren rech­ten Bild­schirm­rand funk­tio­niert. Der Pfeil, der selbst beim Scrol­len auf sei­ner Posi­tion bleibt und einen per Klick wie­der nach oben zum Sei­ten­an­fang befördert.

Im Grunde muss man dafür nur am Ende der Seite ein Bild ein­bauen — natür­lich vor dem letz­ten </body> — und das Ganze dann mit CSS fixieren.

Ein Bild mit Link drum­herum sieht fol­gen­der­ma­ßen aus:

<p>
    <a title="Jump to top" href="#top">
        <img id="toparrow" src="http://felixtriller.de/wp-content/themes/divide/images/top.jpg" alt="top"/>
    </a>
</p>

Damit der Link auch wirk­lich zum Sei­ten­an­fang springt, muss <body> so abge­än­dert werden:

<body id="top">

CSS macht den Rest:

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

Über right und bot­tom lässt sich der Abstand zum „Boden“ und zum rech­ten Rand ändern.

Die ent­spre­chende Gra­fik kann man sich hier herunterladen.

Tags, RSS-Feed & Trackback:

Tags: , , , , | Der Artikel wurde am 21. Februar 2008 gegen 19:58 Uhr von Felix Triller verfasst und unter „Tipps und Tricks“ abgelegt. Sie können gerne einen Kommentar schreiben. Für einen Trackback benutzen Sie bitte diesen Link. Wenn Ihnen gefällt, was Sie hier lesen, abonnieren Sie doch meinen RSS-Feed.
 

2 Kommentare

  1. funkygog sagt:

    Vie­len Dank Felix,
    habe es eben bei mir eingebaut.

    Noch zwei Hin­weise für WP-User:
    Das öffe­nende Body fin­det man in der Header.php
    das schlie­ßende in der Footer.php

    Die css-Angaben natür­lich in der style.css

    Schö­nen Gruß
    Gorden

  2. Herz­li­chen Dank für die Ergänzung :)

© (cc) 2005-2012 Felix Triller. Impressum. Made on a Mac, hand-coding XHTML & CSS. Anmelden. Powered by WordPress and all-inkl.com.