Sprung zum Seitenanfang bei Links ohne Ziel (#) verhindern
Von: Jonas Mit dem JavaScript-Befehl void(0); kann ein undefinierter Wert übergeben werden. Links mit Raute (#) sorgen damit nicht länger für einen Sprung nach oben zum Seitenanfang.
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.
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.
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!!!