a:focus verhindern auf Seitenanfang zu springen

[Matthias Scharwies]

Servus!

Hallo Leute,

ich arbeite mich noch in HTML und CSS ein, bin also kein Profi.

Ich gestalte zur Zeit eine Webseite und habe auf meine Startseite vier Icons gepackt, welche einen Effekt auslösen sollen, sobald man auf diese klickt. Das habe ich eigenlich gut hinbekommen, allerdings nur mit einem "a-Element". Das Problem hierbei ist, dass sobald man auf das entsprechende Icon klickt (wegen <a href="#">) die Seite immer auf den Seitenanfang scrollt.

Das ist das Standardverhalten bei einem Link. Dieser Link zeigt auf einen internen Anker ( eingeleitet durch #), den es nicht gibt und geht deshalb zum Seitenanfang.

Ich möchte einfach nur, dass beim klicken der entsprechende Text erscheint.

Dann würde ich einen Button nehmen.

Hier findet ihr meinen Code: https://jsfiddle.net/8rd7usmc/4/

Wie kann ich den Code umschreiben, dass das nicht passiert?

Oder gibt es eine Möglichkeit, zu verhindern, dass beim klicken die Seite hochscrollt?

Das kann man mit JavaScript erreichen. Besser ist es einen Button zu verwenden.

Herzliche Grüße

Matthias Scharwies