Antworten auf deine Fragen:
Neues Thema erstellen

Kein Sprung zum Seitenanfang bei leeren Links

Squeendot

Aktives Mitglied

Servus Leute,

bei uns im Betrieb sind im Online-Bereich drei neue Azubis dazu gekommen. Sie hatten die Aufgabe eine einfache jQuery-Toggle Funktion in eine Seite einzubinden.
Das hatten sie super geschafft, allerdings ist ihre Seite beim öffnen eines Buttons immer wieder an den Seitenanfang gesprungen.

Ein weit verbreitetes Phänomen in der Webentwicklung.

Ich würde meine Antwort gerne mit euch teilen würde, da es bestimmt noch weitere Leute gibt, die da nicht weiter wissen.

Vorher hat zum Beispiel ein Button so ausgesehen:
HTML:
<a href="#">Button</a>

Die Raute lässt den leeren Link aber immer wieder zum Seitenanfang springen.
Hier nun also die verbesserte Version, wodurch die Bildschirmposition nicht verändert wird:
HTML:
<a href="javascript:return false;">Button</a>


Ich hoffe, ich konnte doch einigen damit weiterhelfen.


Lieber Gruß,

Julian
 

patrick_l

Hat es drauf

Wenn man nirgendwo anlegen möchte, braucht man auch keinen Anker werfen. ;) Anders ausgedrückt, wäre von der Semantik der Button-Tag sinniger. Bestes Beispiel wäre wohl das Bootstrap Framework.

Liebe Grüße, Patrick
 
D

DerLordi

Guest

Also ich sehe das als "unsaubere" Lösung, da Javascript (Und damit Logik) nicht wirklich was in einem HTML File zu suchen hat. Die saubere Lösung wäre folgende.

index.html
HTML:
<a class="btn" href="#">mein Link</a>

main.js (vorzugsweise mit jQuery)
Javascript:
$('.btn').on('click', function(e) {
    // was auch immer der button machen soll

   e.preventDefault();
});
 

Squeendot

Aktives Mitglied

Okay, da hast du recht @DerLordi....

Aber das ist das gleiche Thema wie mit CSS. Manche schreiben es halt oben mit ins selbe Dokument (was man aber eirklich, WIRKLICH nicht machen sollte) und manche eben nicht.
Ich bin auch kein Fan von solchen Mischungen, aber bei so einer kleinen Zugehörigkeit mache ich doch gern mal eine Ausnahme ;)

@patrick_l Stimmt, shame on me :D
Bei vielen Bootstrap-Vorlagen werden allerdings formatierte Anker verwendet, die dann nur wie Button ausschauen. So war es auch in diesem Fall... Also aufpassen :D
 

patrick_l

Hat es drauf

Ich bin auch kein Fan von solchen Mischungen, aber bei so einer kleinen Zugehörigkeit mache ich doch gern mal eine Ausnahme ;)
Solltest du dir abgewöhnen. ;) Ich trenne strickt Markup, CSS und JS voneinander. Zudem werden umfangreiche Stylesheets und Scripte mit ausreichenden Kommentaren versehen. So verliert man auch nach längerer Zeit nicht den Überblick.

Liebe Grüße, Patrick
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.634
Beiträge
1.538.448
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben