Sprung zum Seitenanfang bei Links ohne Ziel (#) verhindern

javascript-slider-bullets

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.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

javascript:return false;

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

<a href="javascript:return false;">Button</a>

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