Sprung zum Seitenanfang bei Links ohne Ziel (#) verhindern

Bei der Arbeit mit JavaScript werden häufig „leere“ Links in der HTML-Struktur angelegt, die dazu dienen ein Event auszulösen. Beispielsweise soll in einem Slider um ein Bild nach rechts navigiert werden. Der Link-Aufbau sieht dann in der Regel so aus: <a href="#">Button</a>. Klickt nun allerdings ein Besucher auf den Button, springt die Seite nach oben und der User muss erneut nach unten scrollen um den Slider zu sehen. Sehr benutzerunfreundlich.

javascript:void(0);

Die Lösung ist denkbar einfach. Anstelle einer Raute (#) muss das Anker-Ziel javascript:void(0); lauten. Euer Link sieht also so aus:

<a href="javascript:void(0);">Button</a>

Anschließend springt die Website nicht länger im Browser nach oben, wenn ein Besucher den „leeren“ Link anklickt.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 10 Kommentare

  1. marie
    schrieb am 05.05.2019 um 13:41 Uhr:

    Hallo. Habe das gleiche Problem. Funktioniert das ganze auch nur mit HTML und PHP, bzw. wie?
    Danke!

    Antworten
  2. Moglie
    schrieb am 17.03.2018 um 17:13 Uhr:

    ok – und wer es doch möchte das die seite nach oben springt ohne ein # in der browser zeile zu haben kann weil evtl. nicht ein seiten slider sondern ein top-slider der kann es ja mal mit…
    AND MORE..
    versuchen.

    Antworten
  3. Moglie
    schrieb am 17.03.2018 um 17:12 Uhr:

    ok – und wer es doch möchte das die seite nach oben springt ohne ein # in der browser zeile zu haben kann weil evtl. nicht ein seiten slider sondern ein top-slider der kann es ja mal mit…

    %3Ca%20href%3D%22javascript%3Aself.scrollTo%280%2C0%29%3B%22%3ESLIDE%20TOP..%3C/a%3E

    versuchen.

    Antworten
  4. Fabian
    schrieb am 22.05.2016 um 17:10 Uhr:

    Vielen Vielen Vielen Dank.
    So simpel und lässt mich doch stunden verzweifeln :D

    Antworten
  5. Werner
    schrieb am 04.03.2013 um 21:27 Uhr:

    Super, Danke auch für den Javascript-Vorschlag!
    Das Einfache fehlt manchmal.

    Noch ein Tipp: Es macht auch Sinn, aussagekräftige IDs zu verwenden, da man diese bei der Verlinkung ja sieht.

    Antworten
  6. Basti
    schrieb am 27.02.2013 um 20:04 Uhr:

    Link

    Finde ich schöner (beim Hover wird als Link „#“ angezeigt)

    Antworten
  7. Alex
    schrieb am 27.02.2012 um 11:00 Uhr:

    @Fidel:

    Die Lösung die Du in Deinem Beispiel bringst (keine Sorge ich bevorzuge diese Lösung auch), ist natürlich ein jQuery-Beispiel. Allerdings benutzt nicht jeder jQuery. Wollte das an dieser Stelle nur mal anmerken, nicht das Jemand versucht dein Beispiel zu verwenden und sich wundert, warum das nicht klappt ;)

    Zusätzlich kann man auch in der Handler-Funktion auch einfach false zurückgeben.

    Antworten
  8. Valentin
    schrieb am 23.02.2012 um 12:30 Uhr:

    Das geht auch, wenn man statt „javascript:return false;“ einfach „javascript:;“ verwendet.

    Antworten
  9. Fidel
    schrieb am 23.02.2012 um 10:40 Uhr:

    Das geht auch mit void(0) oder mit event.preventDefault() was mir eigentlich am besten gefällt.

    $(„#buttonID“).click(function(event) {
    event.preventDefault();

    });

    So bleibt das HTML Code ohne inline Javascript.

    Antworten
  10. Claudia
    schrieb am 23.02.2012 um 10:26 Uhr:

    Danke für diesen tollen Hinweis!!!

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →