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 Berlin-Termine für Ende 2017 sind online!

Jetzt Frühbucher-Preise 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.