HTML: nach oben springen mit dem Textmarke Link
Es wird wohl kaum jemanden geben, der nicht mit mir übereinstimmt, dass die Nutzerfreundlichkeit einer Webseite beziehungsweise eines Blogs äußerst wichtig ist. Je umständlicher eine Seite für seine Besucher gestaltet ist, desto höher ist auch die Absprungrate. Klar, dass sich der Nutzer im Design-Dschungel zurechtfinden muss. Einer der Nachteile von viel gelesenen und damit auch kommentierten Blogs in Sachen Nutzerfreundlichkeit ist das mit dem direkten Lesen und Surfen auf dem Blog ewig verbundene Scrollen.
Wem ist dabei nicht schon mal fast der Finger abgebrochen, rauf, runter, wieder von unten nach oben – hin und her scrollen, da wird die Maus richtig gefordert und schon ganz schön heiß durch das dauernde Scrollen. Eine wirklich wertvolle Abhilfe schafft ein kleines AddOn, eine so genannte HTML Textmarke, die es ermöglichlicht, mit nur einem Klick von unten nach oben an den Seitenanfang zu springen.
Kaum einer, der sich etwas mit HTML auseinandergesetzt hat, kennt Textmarken nicht und die bekannteste davon ist mit Sicherheit der Link, der es ermöglicht mit nur einem Klick von unten nach oben zu springen. Nutzerfreundlichkeit pur.
HTML Textmarke Link in die Webseite bzw. den Blog einfügen
Der HTML Textmarke Link zum nach oben springen ist nicht wirklich schwer zu implementieren auf der eigenen Webseite. Direkt unter dem einleitenden Body Tag (<body>) muss als erstes einmal die Textmarke als Zielsprungpunkt definiert werden. Diesen einleitenden Body Tag findet Ihr in WordPress in der header.php. Direkt darunter einfügen:
<a name="oben"></a>Dabei seid Ihr vollkommen frei in der Begriffswahl. Anstatt “oben” könnt Ihr die Textmarke absolut beliebig benennen.
Der zweite Schritt der dazu notwendig ist, den Usern zu ermöglichen mit einem Klick von unten noch oben zu springen ist unten, an beliebiger Stelle, den nutzerfreundlichen Link zum springen einzufügen. Da bietet sich im WordPress Theme vor allem die footer.php an. Natürlich kann dieser Link alternativ auch direkt in die darüber liegenden Templates eingebunden werden, z.B. in die comments.php. Nur müsst Ihr dann auch daran denken, den Link eventuell auch in der index.php, der archive.php etc. einzubinden. Also die entsprechende Datei öffnen und an gewünschter Stelle folgendes eingeben:
<a href="#oben">Ganz nach oben springen</a>“#oben” muss natürlich der gleiche Text sein, den Ihr im ersten Schritt gewählt habt. Beim Linktext seid Ihr wiederum total frei in der Wahl.
HTML Textmarke Link als Button, Bild oder Icon einbinden
Auch das Einbinden eines Button, Bildes bzw. eines Icons ist statt dem Linktext möglich:
<a href="#oben"><img src="eure bild details" /></a>Wie Ihr seht, ist es ganz einfach einen Link mit einer HTML Textmarke einzufügen, und so den Lesern zu erlauben, mit nur einem Klink von ganz unten nach ganz oben zu springen. Je nachdem wo Ihr die HTML Textmarke einfügt ist natürlich auch anderes springen möglich. Oft werden solche Textmarken auch dazu verwendet von oben nach unten in verschiedene Abschnitte des Textes zu springen. Solche Textmarken sind genau wie die hier beschriebene einzufügen, nur eben andersherum. Als erstes steht der Link mit dem Linktext und als zweites kommt dann an der entsprechenden Stelle die Textmarke, so dass dann von oben nach unten gesprungen werden kann.
Dieser Artikel hat Dir gefallen? Dann würde ich mich über eine Empfehlung freuen:
PopUp Alternative: Javascript Alert Box mit Titel, HTML Code und Links - Als ich vor einiger Zeit nach Javascript Lösungen suchte, bin ich über eine optisch sehr schön gestaltete Javascript Alert Box Lösung gestolpert, die ich kurzerhand gleich mal ausprobierte und auch [...]
HTML, PHP und CSS Kommentare, bzw. einzelne Codes deaktivieren - In HTML, PHP wie auch in CSS gibt es die Möglichkeit Kommentare einzufügen, die auf der Webseite selbst nicht zu sehen sind. Solche Kommentare ermöglichen dem Betreiber bzw. Webdesigner seine [...]
Twitter Folgen Button (Follow) in Website oder Blog einbinden - Ende Mai diesen Jahres hat Twitter den Folgen Button (engl. Follow Button) freigeben. Im heutigen Artikel möchte ich Euch aufzeigen, wie Ihr den Twitter Folgen Button in Euren Blog bzw. [...]
Code in WordPress Artikel einfügen und richtig darstellen - Wer hin und wieder in seine WordPress Artikel oder auch in die Kommentare Code einfügen und richtig darstellen möchte, wird schnell feststellen, dass WordPress auf Code oft recht eigenwillig reagiert. [...]
Die Verwendung des More Tag in WordPress - Bei längeren Texten bietet sich die Verwendung des More Tag an. Abgesehen davon vermeidet man mit dem More Tag auch den hauseigenen Double Content mit den entsprechenden einzelnen Beiträgen. Wird [...]
- Gern verwendete Suchbegriffe:
- html nach oben springen
- html nach oben
- html textmarke
- link nach oben html
- html auf seite hin und her springen # -verweis
Hallo Tanja,
danke für den Supertipp, denn ich natürlich auch gleich umgesetzt habe. Allerdings wurde bei mir der Code
<a></a>bei W3C als valider Fehler markiert.Ich habe ihn dann auf
<a / rel="nofollow">geändert und schon war W3C einverstanden.Lieben Gruß
Sylvi
Oh Mist, der Code wird hier nicht dargestellt, sorry
Ergänzend dazu: Man kann auch das id-Attribut eines Tags ansprechen. Wenn ich z.B. schreibe:
<h1 id="top">Überschrift</h1>Dann kann ich die Überschrift über die ID anspringen. Nach diesem Prinzip arbeitet ja auch WordPress, wenn man z.B. die Kommentare oder das Kommentarformular anspringt.
Hallo,
schöne Erklärung – einfach umzusetzen, gefällt mir gut.
Viele Grüße aus Hamburg,
Ralf
@Sylvi: Ich habs abgeändert. Wenn Du HTML Code in WordPress schreibst, musst Du die eckigen Klammern codieren mit “& l t ;” und “& g t ;” (ohne Leerzeichen und Anführungszeichen).
Das W3C Gemecker läuchtet mir jetzt aber nicht wirklich ein. Bei mir meckert er da nämlich nix an
@Markus: Ja, richtig, schönes Beispiel.
@Ralf: Danke
Soweit ich mich erinnere gilt das Attribut name bei a-Tags seit XTHML 1.0 als deprecated und ich würde eher zur Verwendung der ID neigen.
http://derickrethans.nl/html-name-attribute-deprecated.html
Hallo Tanja!
Sehr verständlich und wie immer super erklärt!
Deine Anleitung hat mir sehr gut gefallen.
Lieben Gruß aus Kärnten!
Franz
@Jan: ID ist zwar grundsätzlich nicht schlecht, nur muss man da schon auch gut aufpassen, darf ja z.B. inhaltlich gleich nur einmal verwendet werden. Andererseits ist deprecated natürlich auch nicht wirklich das Gelbe vom Ei.
@Franz: Thanks
Hmm…
@Tanja: Natürlich darf id nicht doppelt vergeben werden, name aber doch auch nicht, oder? Würde zumindest doch keinen Sinn machen…
@Markus: Frag nicht was ich diesbezüglich schon alles gesehen habe… am prominentesten ist mir hier ein Fall, wo ich ein Premium Theme hätte W3C konform machen sollen. Ist an ausschließlicher Verwendung von CSS IDs (der Autor kannte scheinbar das Attribut class und die Unterschiede nicht) gescheitert (wäre viel zu aufwendig gewesen).
Vielen Dank für die tolle und ausführliche Erklärung. Mich nervt nämlich das Hochgescrolle selber total.