"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

77 Kommentare

  1. Supi, habs direkt übernommen :)

    AntwortenLöschen
  2. Wunderbar! Habs auch gleich eingebaut!
    Grüßle
    Ursel

    AntwortenLöschen
  3. Euer Blog ist echt genial, habe direkt mal mehrere Stunden damit verbracht alles durch zu sehen ^^
    Eine Frage hätte ich allerdings: Wo bekommt man die Buttons für Twitter, Facebook & co her?

    Alles Liebe

    AntwortenLöschen
    Antworten
    1. Runterladen. Da gibt es auch auf cpl mehrere. Oder du machst sie dir selber. :)

      Löschen
  4. genial aber könntet ihr ein post dazu machen wie man die seiten bearbeiten lann denn ich würde gerne wissen wie man so hierkriegt wie z.B sie -->
    http://ningrids.blogspot.com/



    wäre super geil *_*

    AntwortenLöschen
  5. ♥-lichen Dank, es hat alles super geklappt :)
    Weiter so!

    AntwortenLöschen
  6. DANKESCHÖN für diese super Idee. Hat sofort funktioniert und gefällt mir sehr gut!
    LG, Klarissa

    AntwortenLöschen
  7. Um es kurz zu machen: Das findest du alles hier...

    http://jules-oase.blogspot.com/p/mein-gewinnspiel.html

    AntwortenLöschen
  8. endlos cooler blog!

    und der name" copypastelove" killte mich!!!

    grüße gepresst.

    markymarc

    AntwortenLöschen
  9. Tolles Tutorial! Hab's direkt in meinen Blog eingebaut :)

    AntwortenLöschen
  10. Me encanta el blog, te sigo guapa!!

    Pásate por el mio un besazo

    AntwortenLöschen
  11. hey :) ich soll euch von elisabeth von ichbinjasofuturistisch.blogspot.com sagen, dass sie hilfe braucht aber nicht mehr auf euren blog kommt irgendwie :o Liebe Grüße :)

    AntwortenLöschen
  12. Super!
    Habs auch gleich eingebaut :)

    AntwortenLöschen
  13. Klasse und es klappt bei mir sogar auch *lach*
    Vielen Dank dafür.
    LG Doreen

    AntwortenLöschen
  14. Wow, super !!! Vielen lieben Dank, dass hat super bei mir geklappt...

    vielen dank nochmal :D

    AntwortenLöschen
  15. Toll! Habs auch eingebaut :)
    Danke!

    AntwortenLöschen
  16. Das ist ja total einfach, vielen Dank.

    AntwortenLöschen
  17. Dankeschön ! :-)
    Ich habs Direkt auf meinen Blog getan :))

    http://www.trust-in-time.blogspot.com

    AntwortenLöschen
  18. Hi, ich habs auch direkt in meine beiden Blogs eingebaut :D
    Vielen Dank dafür!

    AntwortenLöschen
  19. das ist eine super idee.
    habs gleich eingebaut. danke. (:

    AntwortenLöschen
  20. Danke für das Tutorial, hat super geklappt :)

    AntwortenLöschen
  21. Vielen Dank!
    Habs auch direkt übernommen! :)

    AntwortenLöschen
  22. geht das auch mit einem kleinen Bild oder Gif an der Seite??

    AntwortenLöschen
  23. bin ich die einzige, bei ders nicht klappt?

    .. wo muss ich das denn einfügen?
    wenn ich das irgendwo einfüge, kommt der ganze text über dem header und über der leiste mit dem 'regelmäßig lesen'.

    och mensch, ich will das das klappt, bitte helft mir :)

    mein blog

    AntwortenLöschen
  24. bei ir ist das wie bei MARTHA ...alles erscheint im header..wo soll ich das einfügen?

    AntwortenLöschen
  25. danke, habe ich gleich mal ausprobiert! :)

    Liebe Grüße ;*

    Mein Blog: http://lilalinaluftballon.blogspot.com/

    AntwortenLöschen
  26. danke, habe ich gleich mal ausprobiert! :)

    Liebe Grüße ;*

    Mein Blog: http://lilalinaluftballon.blogspot.com/

    AntwortenLöschen
  27. habs auch ausprobiert. echt super. herzlichen dank :))

    AntwortenLöschen
  28. kann man auch den Header, wenn er zum Beispiel an der Seite ist, schweben lassen?
    Und wie geht das? vielleicht könnt ihr dazu ja mal ein Tutorial machen :)

    lg <3

    AntwortenLöschen
  29. Antworten
    1. Supertoll hat problemlos geklappt! Vielen Dank <3
      http://lovefashioneverymoment.blogspot.com

      Löschen
  30. Boah, danke für den Button, den habe ich schon lange vermisst.

    LG Anique

    AntwortenLöschen
  31. Liebe Jenny, ich bin's nochmal :o)

    kannst du mir bitte,bitte vielleicht erklären (oder jemand anderes, der hier mitliest) wie mein Label, bei einem Kommentar erscheint?... Da sind nämlich nur Punkte :o(
    (siehe letzten comment)

    Wäre so toll.
    LG und danke
    Anique

    AntwortenLöschen
  32. Ich finde das Ding nicht wo man Html/Javascript gadgets machen kann, bei mir geht iwi nur über html...Hilfe?

    AntwortenLöschen
  33. Danke! Super Tipp und gleich eingefügt :)

    AntwortenLöschen
  34. ihr habt so einen tollen , hilfreichen Blog!!! Macht weiter so, ihr seid echt klasse!

    AntwortenLöschen
  35. http://gozde-baam.blogspot.com/2012/01/back-to-top-link-einbauen.html

    AntwortenLöschen
    Antworten
    1. Wollt euch nur mal darauf aufmerksam machen ;)

      Löschen
  36. Ich würde es Lieben gerne Einbauen,nur leider ist mir die Erklärung Viel zu Komplieziert!

    AntwortenLöschen
  37. Immer wieder finde ich hier etwas echt geniales :)
    Außerdem ist hier Informatikunterricht aus der Schule echt brauchbar :D
    Also, wenn ich was ändern will etc. ;)
    Weiter so! :)

    AntwortenLöschen
  38. Kann man da irgendwie die Größe ändern ?
    Bei mir ist der Pfeil so klein und grau, das man ihn nicht sieht...

    AntwortenLöschen
  39. Danke, hat super geklappt!
    Aber was müsste ich denn eingeben, dass die Farbe schwarz ist und nicht grau, also wie lautet der 'Code' für schwarz??

    AntwortenLöschen
  40. Ich hab' genau die selbe Frage wie Paloma..
    woher weiß ich denn welche Farbe welchen Code hat? Und wo muss ich den Farbcode dann einfügen?

    AntwortenLöschen
  41. Ich wollte nur Bescheid sagen, dass ich ein Tutorial geschrieben habe, welches sich an dieses hier anlehnt aber euch verlinkt habe. http://time-to-steal-ideas.blogspot.de/2012/09/back-to-top-button-einbinden.html

    AntwortenLöschen
  42. danke danke danke... ach mensch... durch euch gefällt mir mein Blog immer besser... ich weiß, ich wiederhol mich aber ihr seid super!!!!

    AntwortenLöschen
  43. Hab's gleich hinbekommen :-)
    Dankeschön! Ihr seit toll! ♥
    http://sarahbreathless.blogspot.de/

    AntwortenLöschen
  44. hmm... bei mir funktioniert es nur, bei einer sog."blogspot.de" Adresse, nicht aber bei einer richtigen www.Domain...
    Was mach ich falsch?

    AntwortenLöschen
  45. Das geht doch bestimmt auch andersherum, so dass man einen Link einbaut, der zum Seitenende führt oder? Wie genau mache ich das? Habe es mit Tutorials von anderen (HTML-)Seiten versucht, hat aber alles nicht geklappt... Hoffe ihr könnt mir helfen! LG:)

    AntwortenLöschen
    Antworten
    1. Jaaaa genau so wie bei dir, Mira! Nur, dass ich eben kein Infinite-Scrolling habe... und auch nicht genug Ahnung von HTML :(
      Also das mit dem Floatlink/Div-Container habe ich, denke ich, verstanden. Aber wo / wie lege ich denn fest wohin der Link führen soll? Weil dann müsste ich doch nur quasi Seitenanfang und Seitenende austauschen, am Style und so brauche ich ja nichts verändern. Oder ist das alles viel komplizierter..?

      Löschen
  46. Ich würde gerne mehrere dieser Links einfügen :) nur wie geht das? wäre echt glücklh über Hilfe

    Lieben Gruß ♥

    AntwortenLöschen
  47. super schönes tutorial. Aber eine frage hätte ich dennoch: wie kann man das Symbol in die rechte ecke kriegen?

    AntwortenLöschen
  48. Hallo,
    erstmal ein RIESIGES Danke an das Tutorial. Alles hier ist echt toll und vorallem verständlich erklärt.

    Trotzdem hab ich eine Frage: Das einfügen des "Back-to-top"-Buttons hat einwandfrei funktioniert. Ich möchte allerdings dass er einen nicht transparenten hintergrund bekommt. zb. in form eines ovals, kreis oder rechteck
    Wie mache ich das?

    AntwortenLöschen
  49. Vielen Dank :) Werde ich direkt verwenden und dir gleich mal folgen :)

    Liebe Grüße
    Marie

    http://vonmri.blogspot.de

    AntwortenLöschen
  50. Das ist toll! Danke. :)

    Liebste Grüße,
    Marija

    AntwortenLöschen
  51. Genau dieses Feature habe ich gesucht. Vielen Dank!!! :-)

    LG, Sabrina
    Happiness-Is-The-Only-Rule

    AntwortenLöschen
  52. Vielen Dank! Hat super funktioniert und war ganz einfach.

    http://marionsgenusskueche.blogspot.de/

    AntwortenLöschen
  53. Hallo!
    Vielen lieben Dank für die einfache Anleitung, das hab sogar ich als Laie super verstanden und auf meinem Blog angewendet.

    glg Andrea

    AntwortenLöschen
  54. Super einfach erklärt und kriegt man ganz schnell hin.
    Ich versteh nur nicht wie man dass mit den Facebook Buttons hinkriegt...

    AntwortenLöschen
  55. DANKESCHÖN! Hat super geklappt!!! :)

    AntwortenLöschen
  56. Tolles Tutorial, das einfügen des Back to Top-Buttons funktioniert auch super.
    Aber jetzt habe ich versucht, oben in meinem Design einen fixierten Balken zu coden, was ja eigentlich (mit weglöschen des Link-Teils und ändern der Koordinaten) funktionieren sollte, aber leider verschiebt sich, wenn ich den Balken mit einem neuen HTML-Gadget einfüge und auch den Index ändere, mein Back to Top Pfeil nach oben.
    Könnt ihr mir bitte helfen? Ich habe wirklich keine Ahnung, wie ich dieses Problem sonst noch lösen sollte.

    Liebe Grüße, Elle

    AntwortenLöschen
  57. Sehr gutes Tutorial! Habe es sofort in meinen Blog eingebaut, ist echt ein super Eyecatcher :D

    LG Franzi von franzigrafie http://www.franzigrafie.blogspot.de/

    AntwortenLöschen
  58. Vielen Dank für den Tipp und die tolle Anleitung! :) LG Judith (www-frau-liebling.de)

    AntwortenLöschen
  59. Danach hab ich gesucht!!! Vielen Dank, hat wunderbar geklappt :D

    AntwortenLöschen
  60. dankeschön, hab direkt deinen html Code übernommen, endlich funktioniert beim Blog wieder,
    LG Christine

    AntwortenLöschen
  61. Hey Mira
    Endlich jemand der einem wirklich hilft und es so erklärt dass es auch ein greenhorn wie ich versteht :-) Freu mich riesig über diese Lösung!! Schlicht, elegenat und einbaubar! Danke Dir!
    lg mynona

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!