kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Da ich in den vergangenen Wochen mehrere Anfragen zu diesem Thema erhalten habe, möchte ich die Lösung gerne öffentlich posten.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

7 Kommentare

  1. Claudia

    Verfasst am 23. Februar 2012 um 10:26 Uhr.

    Danke für diesen tollen Hinweis!!!

  2. Fidel

    Verfasst am 23. Februar 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.

  3. Valentin

    Verfasst am 23. Februar 2012 um 12:30 Uhr.

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

  4. Alex

    Verfasst am 27. Februar 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.

  5. Basti

    Verfasst am 27. Februar 2013 um 20:04 Uhr.

    Link

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

  6. Werner

    Verfasst am 4. März 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.

  7. Fabian

    Verfasst am 22. Mai 2016 um 17:10 Uhr.

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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.