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.

Seminar: Responsive Web Design für Konzeptioner, Projektleiter und Designer

In diesem Seminar lernen Sie alle Aspekte von Responsive Design kennen, ohne dabei tiefer als notwendig in die technischen Details einzusteigen.

Berlin, 29. + 30. September 2016

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.