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.
Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
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
Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.
Feedback & Ergänzungen – 10 Kommentare
Kommentar zu dieser Seite
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 →
Hallo. Habe das gleiche Problem. Funktioniert das ganze auch nur mit HTML und PHP, bzw. wie?
Danke!
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.
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.
Vielen Vielen Vielen Dank.
So simpel und lässt mich doch stunden verzweifeln :D
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.
Link
Finde ich schöner (beim Hover wird als Link „#“ angezeigt)
@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
falsezurückgeben.Das geht auch, wenn man statt „javascript:return false;“ einfach „javascript:;“ verwendet.
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.
Danke für diesen tollen Hinweis!!!