"Back to top"-Link einbauen ♥♥

Hallo zusammen!

Kennt ihr das - man ist auf einem Blog mit vielen Bildern und Beiträgen, scrollt fröhlich runter - und möchte dann wieder nach oben. Es bleibt einem nichts anderes übrig, als wieder mühselig nach oben zu scrollen.

Aber ich hab da eine Idee, die Abhilfe schafft :)


Und zwar könnt ihr mit einem kleinen Code einen Link erzeugen, der die ganze Zeit an der gleichen Stelle bleibt, egal wo man hinscrollt. Dazu müssen wir nichts am Design ändern, sondern einzig und allein ein Gadget "HTML/JavaScript" hinzufügen. Ich würde es dann irgendwo in den Footer setzen, denn die Positionierung ist egal - das machen wir gleich im Code.

<style>
#floatlink {
position:fixed;
right: 20px;
bottom: 10px;
z-index:10;
font: bold 12px Century Gothic;
letter-spacing: 0.2em;
}

#floatlink a:link {
color:#aaaaaa;
text-decoration:none;}
#floatlink a:hover {
color:#aaaaaa;
text-decoration:none;}
#floatlink a:visited {
color:#aaaaaa;
text-decoration:none;}

</style>


<div id="floatlink">
<a href="#">&uarr; NACH OBEN &uarr;</a></div>

Sieht lang aus, oder?
Dann erklär ich euch mal die einzelnen Zeilen:

<style> ... </style> beschreibt den css-Code, der unseren Link formatieren soll.

#floatlink { ... } ist unser div-Container, der dann so schön auf dem Blog "schwebt".

position:fixed; sagt, dass der Link bloß da bleiben soll, wo wir es wollen - unabhängig vom Rest.

right: 20px; bottom: 10px; beschreibt die Position: Der Link ist dann in der rechten unteren Ecke, mit den Abständen 10 und 20px. Das könnt ihr natürlich nach Belieben ändern, probierts einfach mal aus.

z-index:10; damit gehen wir sicher, dass der Link "über" allem anderen liegt und nie verdeckt wird. Falls doch, erhöht die Zahl.

font: bold 12px Century Gothic; letter-spacing: 0.2em; Dies ist meine gewählte Schriftart. Sucht euch was passendes zu eurem Blog aus.

#floatlink a:link {
color:#aaaaaa;
text-decoration:none;}
#floatlink a:hover {
color:#aaaaaa;
text-decoration:none;}
#floatlink a:visited {
color:#aaaaaa;
text-decoration:none;}
Da es ja ein Link ist, müssen wir das speziell formatieren. Hier habe ich Schriftfarbe gewählt und gesagt, dass er nicht unterstrichen werden soll. Weder im normalen Zustand, noch beim "hovern" mit der Haus, noch im angeklickten Zustand.

<div id="floatlink">
<a href="#">&uarr; NACH OBEN &uarr;</a></div>
Hier kommt dann der "aktive" Teil des Codes: Der Link in einem Div-Container. Das # ist schon richtig so, da muss nichts anderes hin. &uarr; ist der HTML-Code für einen Pfeil nach oben. Aber da kann man natürlich auch alles andere hinmachen, selbst Herzchen. Den Code kennt ihr ja bestimmt alle: &hearts;
♥
Mehr gibts bei selfhtml.

Wie das ganze in Action aussieht, könnt ihr hier sehen. Klein und unscheinbar :)

Mit diesem Code kann man natürlich noch viele andere Sachen anstellen, wie zum Beispiel Buttons an den Rand "heften", die zu Facebook, Flickr und sonstwas führen (habt ihr vielleicht bei mir gesehen ;) ).
Seid einfach kreativ!!

Grüße,
Jenny