HTML #30: to-top Button

Auf dem ein oder anderen Blog konnte man sie schon entdecken, die "to-top Button". Super praktisch, denn statt lange zu scrollen genügt ein Klick und man ist wieder ganz oben auf der Seite. Wie so oft gibt es auch hier viele Wege, die zum Ziel führen. Einmal vielleicht eleganter und mit Algorithmus oder eben die ganz einfache und Ergebnis orientiert mit simplem HTML. Heute gibt es an dieser Stelle die einfache Version, die ganz einfach angepasst und personalisiert werden kann.



Erstmal muss ich euch natürlich zeigen worum es geht. Seht ihr da unten rechts den Feil mit dem "nach oben" Text? Genau den könnt ihr euch auch auf eurem Blog einrichten. Dabei lässt sich jeder beliebige Feil ganz einfach einfügen und so ist der HTML-Code ganz einfach personalisierbar.


Wir öffnen das Layout-Menü und fügen ein neues HTML/Java Gadget ein. 


Dieses ziehen wir danach ganz unten in den Footerbereich. Einen Namen müssen wir nicht vergeben, aber etwas Inhalt braucht es dann doch noch.


So sieht es bei mir aus und im Detail ist das dieser Code:

<style>
#floatlink {
position:fixed;
right: 1px;
bottom: 10px;
z-index:99;
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="#">NACH OBEN</a></div>
Nun geht es noch ans Anpassen:

Die Position kann über die Zahl hinter "right" nach links und rechts verschoben werden. Hier könnt ihr einfach ausprobieren. Die Höhe könnt ihr mit der Zahl hinter "bottom" verändern. Hier gebt ihr jeweils die Pixelanzahl an. Auch hier gilt: Probieren bis es euch gefällt.

Neben der Position könnt ihr natürlich auch den Text verändern. Die Farbe könnt ihr über "color" verändern. Dazu gebt ihr einfach den Farbcode eurer Wahl. Diese findet ihr z.B. bei Farbtabelle. Insgesamt gibt es drei Farben, die ihr einstellen könnt. Die Linkfarbe (a:link), die Linkfarbe, wenn die Maus über den Link bewegt wird (a:hover) und die Farbe des bereits besuchten Links (a:visited). Den Text selbst könnt ihr ändern, wenn ihr den Text "NACH OBEN" verändert. Die Raute "#" muss unbedingt unverändert stehen bleiben, denn diese bringt euch zurück nach oben.

Alternativ zum Text könnt ihr auch eine Bilddatei verwenden, so wie ich es gemacht habe. Dazu muss lediglich er letzte Absatz (der Bereich zwischen <div und </div>) des Codes ersetzt werden.

<div id="floatlink">
<a title="Bring mich zurück nach oben" href="#"><img src="[URL]" width=70  border="0" /></a></div>

Hier muss einfach nur [URL] durch den Link zum jeweiligen Bild ersetzt werden. Es empfiehlt sich hier definitiv eine *.gif-Datei mit einem durchsichtigen Hintergrund. Am besten ladet ihr eure Datei in euer Picasaalbum hoch. Wie das geht habe ich im dritten Teil der Reihe ausführlich erklärt.

Bei Fragen dürft ihr euch natürlich immer gerne an mich wenden und ich versuche dann gerne zu helfen. Auch andere Fragen dürft ihr mir gerne stellen...

17 liebe & nette Meinungen

  1. Oh liebe Rebecca, da hast du ja wieder etwas tolles für uns gezeigt. Ich werde demnächst versuchen den Pfeil bei mir einzubauen, denn das scrollen finde ich teilweise auch sehr nervig.

    LG

    moni

    AntwortenLöschen
    Antworten
    1. Hallo Moni,

      dann wünsche ich dir ganz viel Erfolg und bei Fragen darfst du dich gerne bei mir melden :)

      Liebe Grüße
      Rebecca

      Löschen
  2. Super Rebecca, wieder ein toller Tipp. Ich hab´s gleich mal eingerichtet, denn diese Funktion wollte ich schon immer haben.
    LG
    Susanne

    AntwortenLöschen
    Antworten
    1. Hallo Susanne,

      ich musste gerade doch glatt mal bei dir schauen und es klappt - das freut mich total :D Wenn du sonst noch gerne etwas hättest, dann immer her mit den Fragen.

      Liebe Grüße
      Rebecca

      Löschen
  3. Wie genial!!! Ich wusste zwar noch nicht, dass ich das brauche.... aber jetzt muss ich es haben. Ist ja auch viel praktischer.
    Liebe Grüße
    Gusta

    AntwortenLöschen
    Antworten
    1. Hallo Gusta,

      das ist immer gefährlich, wenn man plötzlich etwas unbedingt haben muss. Meist wird das ja teuer, aber hier kostet es nicht mal viel Zeit.

      Liebe Grüße
      Rebecca

      Löschen
  4. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  5. Hallo,
    deinen schönen Pfeil hab ich nun, aber leider lässt sich die Farbe nicht ändern.
    Da mein Blog fast weiß ist, sieht man diesen weißen Pfeil leider nicht.
    Ich habe schon mehrere Farbcodes versucht. Klappt aber leider nicht.
    Hast du eine Idee?

    AntwortenLöschen
    Antworten
    1. Hallo Edith,

      gerne hätte ich dir direkt geantwortet, aber du bist leider als "no-Reply-Blogger" unterwegs. Darum hoffe ich, dass du hier noch einmal reinschaust. Bei meinem Pfeil handelt es sich um eine Bilddatei. Bilddateien können nicht mit HTML bearbeitet werden (Größe, Position der Datei ja, aber eben nicht die Datei an sich z.B. Form und Farbe...) um die Farbe zu ändern brauchst du ein Bildbearbeitungsprogramm.

      Liebe Grüße
      Rebecca

      Löschen
  6. Achso, vielen Dank. Was ist denn ein no-reply blogger und kann ich das ändern?

    AntwortenLöschen
    Antworten
    1. Dieser Kommentar wurde vom Autor entfernt.

      Löschen
    2. Hallo Edith,

      das beudeutet, dass ich dir auf deinen Kommentar nicht direkt antworten kann, da keine Emailadresse mitgesendet wird. Stattdessen wird eine Googleadresse angezeigt, die aber keinem weiter hilft. Dies passiert wie Gusta in Teil 18 dieser Reihe erklärt hat leider durch das Verknüpfen. Die Lösung hat sie damals gleich mitgeliefert.

      Liebe Grüße
      Rebecca

      Löschen
  7. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  8. Sooo, nun hab ich den ganzen Abend rumprobiert und habe einen schwarzen Pfeil und auch,so hoffe ich, bin ich kein no-replay Blogger mehr .
    LG Edith und vielen vielen Dank

    AntwortenLöschen
    Antworten
    1. Hallo Edith,

      so richtig nett ist es ja nicht sich an Bilddateien anderer zu bedienen ohne zu fragen ob es okay ist, gerade wenn im Impressum steht, dass sie nicht verändert werden dürfen und der Name genannt werden muss. So klappt es jetzt zwar bei dir, dafür ist der Hintergrund weiß. Bestimmt hast du keine *.gif-Datei verwendet.

      Das mit der Mailadresse klappt nun. Ob du durch einen Klick zu Google+ oder Blogger weiter geleitet wirst sagt gar nichts darüber aus ob du ein no-Reply-Blogger bist. Dazu solltest du dir einfach selbst mal einen Kommentar schreiben. Dort siehst du dann ja ob du selbst als Absender angezeigt wirst oder "noreply-comment@blogger.com".

      Viele Grüße
      Rebecca

      Löschen
    2. Sorry Rebecca, das war mir so nicht bewusst, da ich es ja in schwarz abgeändert hatte und dich auch gefragt hatte, wie man das macht.
      Tut mir leid, ich werd`s wieder ändern.
      Nochmal sorry

      Löschen
  9. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen

Vielen lieben Dank, dass du dir die Zeit genommen hast mir einen Kommentar zu schreiben. Ich freue mich sehr.Solltest du eine Frage haben, so lass mir doch bitte eine Mailadresse da, damit ich dir auch antworten kann.

Related Posts Plugin for WordPress, Blogger...