Sven Lennartz 20. April 2005

Design Elemente: Der Top-Link

Kein Beitragsbild

Ex Webdesigner und Gründer von Dr. Web, heute ist Sven als Schriftsteller...

Der Top-Link bietet dem Leser einen Sprung vom Seitenende an den Seitenanfang an. Die Einsatz- und Gestaltungsmöglichkeiten sind vielfältiger als man denkt. Tatsächlich gibt es eine Fülle unterschiedlicher Ansätze.

Am häufigsten kommt der Pfeil in unzähligen Variationen zum Einsatz. Aber auch purer Text wird oft eingesetzt. Seltener hingegen sind Winkel, die Windrose oder ein nach oben deutender Zeigefinger.

Benannt wird der Top-Link international mit „top“, „back to top“, „top of page“ oder „up“, im Deutschen mit „hoch“, „nach oben“, „oben“ oder auch „Seitenanfang“.

Screenshot

Pfeil und Text in Kombination. Im das gleiche Gewand wurden auch andere Seitenelemente gesteckt, zum Beispiel der Link zum Impressum oder der Absendebutton eines Formulars (honeywell-security.de)

Screenshot

Hier wurden Text und Icon auf schlichte Weise miteinander kombiniert (geog.uni-hannover.de).

Screenshot

Ein ausgewogenes Design ist typisch für geschäftliche Auftritte (himsa.com).

Screenshot

Anklänge an das Web 2.0 und einen RSS-Feed (elegantseagulls.com).

Screenshot

Eher streng, technisch, sachlich und kühl fällt diese Variante aus (bussgeldkataloge.de).

Screenshot

Barocke Gestaltung in Form einer Windrose (nd.edu).

Screenshot

Symbolunterstützter Text (andreas-kalt.de)

Screenshot

Der Top-Link findet sich hier als Bestandteil einer zusätzlichen Navigationsleiste am Seitenende (einfach-fuer-alle.de)

Screenshot

Auffälliger kann man es kaum noch machen… (spargel-center.de).

Screenshot

… aber größer (pask.muc.kobis.de).

Screenshot

Das Ampelmännchen hebt seine Arm, wenn es von der Maus berührt wird (phoenikks.de).

Screenshot

Diese Variante setzt auf Abstraktion. Wiederum gibt es einen verstärkenden Mouse-Over-Effekt (koganpagescience.com).

Screenshot

Starke Signalwirkung – in Personalunion mit dem Link zur Druckversion (sansa.nrf.ac.za).

Screenshot

Die Bezeichnung „Textanfang“ ist ungebräuchlich, aber verständlich (vmv.at).

Screenshot

Selten zu finden, aber auch das ist möglich: der Link nach unten. Über den Nutzen lässt sich streiten, denn diese Konstruktion – mit eine kleinen Zusatzmenüleiste – findet sich links unten am Seitenende (dynarch.com).

Der Top-Link kommt keineswegs immer nur am Seitenende vor. Listen oder Fließtexte von stellen eine solche Navigationshilfe gelegentlich auch direkt im Inhalt, beziehungsweise links oder rechts davon zur Verfügung.

Screenshot

Der Toplink zwischen Textblöcken. Eine solche Navigation macht in der Regel auch Gebrauch von Ankern.

Screenshot

Eine ähnliche Variante, die allerdings weniger eindeutig ausfällt. Viele Besucher werden den Link nicht als solchen erkennen und nutzen.

Screenshot

Dieser Top-Link findet sich rechts vom Fließtext. Die Grafik reagiert optisch auf die Mausberührung (wichernbau.de).

Screenshot

Diese Multifunktionsleiste mit Top-Link findet sich am Seitenende. Die geisterhafte Farbgebung macht eine intuitive Benutzung unmöglich. Man muss erst genauer hinsehen (spelaeo.de).

Screenshot

Mehr Anlass zum Rätselraten als eine wirkliche Hilfe. Position außerhalb des Inhalts links (steuerberater-suchmaschine.de).

Screenshot

Dieser Top-Link befindet sich zwar wie gewohnt am Seitenende, jedoch in einem falschen Kontext (blanzelot.de).

Screenshot

Screenshot

Kreativer Lapsus. Der Top-Link enthüllt sich sobald eine Seite nach unten gescrollt wird. Realisiert mit DIV-Containern. Das Problem: Der Top-Link wird in der äußersten oberen Ecke auf der linken Seite nicht erwartet, der Blick ruht ganz woanders. Zudem handelt man sich heftige Browserprobleme ein. (lyonia.org)

Erstveröffentlichung 20.04.2005

Sven Lennartz

Ex Webdesigner und Gründer von Dr. Web, heute ist Sven als Schriftsteller und Blogger (Conterest) unterwegs. Hol dir sein gratis eBook Wie du mit wenig Zeit viel für dein Blog herausholst. Die Blogpflege Fibel.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück