webseiten anker

das der name mit der # nicht sichbahr ist

Du kannst den Link nicht verschleiern oder ändern. Das # sollte aber nur im Link selbst sichtbar sein und nicht im verlinkten Wort.

Ich bin nun unsicher wo du den Anker weg haben willst: aus dem Link den man anklickt oder aus der URL die danach aufgerufen wird?

Interessant, 🤔 wie könnte man den einen oder den anderen Anker-Link ohne # darstellen?

Dein Beitrag war in deinem anderen Thema gelandet, ich hab ihn mal hierher geschoben.

Anker sind, wie oben schon angedeutet, ein absoluter HTML-Standard. Sie haben keinerlei Nachteile für dich oder deine Website. Wenn du auf diese verzichten willst, gäbe es nur die Möglichkeit mit einem individuellen JavaScript das Scrollen zu dem Ziel zu realisieren. Basis ist diese Funktion, die auch von jedem modernen Browser unterstützt wird: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Beispiel:

jQuery(document).ready(function($) {
        $("a[data-link-target").on("click", function(event) {
            event.preventDefault();
            document.getElementById($(this).data("link-target")).scrollIntoView();
        });
    });

Jetzt ist es natürlich eine Herausforderung das von dein Projekt einzubinden. Da du Elementor in der kostenfreien Version und kein Child-Theme nutzt, wäre das Vorgehen möglicherweise so:

1. Installiere dir ein Code Snippet Plugin: https://de.wordpress.org/plugins/code-snippets/
   Alternativ: erstelle dir ein Child-Theme: https://developer.wordpress.org/themes/advanced-topics/child-themes/
2. Füge beim Code Snippet Plugin ein neues Snippet hinzu. Gib ihm einen Namen und verwende folgenden PHP-Code:

add_action( 'wp_head', function() {
    echo '<script>
    jQuery(document).ready(function($) {
        $("a[data-link-target").on("click", function(event) {
            event.preventDefault();
            document.getElementById($(this).data("link-target")).scrollIntoView();
        });
    });
</script>';
} );

3. Achte darauf das Snippet nicht nur zu speichern sondern auch zu aktivieren.

Anschließend musst du deine Links noch formatieren.

1. Öffne dazu die Seite mit den Links in Elementor.
2. Such dir das Widget heraus wo du derzeit zu „Jahreszeiten“ verlinkst. Dort entfernst du aus dem URL-Feld den Anker #Jahreszeiten und setzt einfach nur ein „#“ rein.
3. Klappe dann die Einstellungen zu dem Link über das Zahnrad rechts von ihm auf. Dort gibst du dann bei Attribut folgendes ein: data-link-target|Jahreszeiten
4. Müsste dann so aussehen: https://snipboard.io/e6aYQI.jpg
5. Speichern, fertig.

Wenn du dann im Frontend die Seite lädst, ist der Anker nicht mehr zu sehen und beim Anklicken kommt man dennoch zum Ziel. Ich habe das so wie oben beschrieben bei mir lokal erfolgreich getestet. Grundsätzlich geht es also. Du musst „nur“ noch die anderen Linkziele entsprechend setzen, das JavaScript muss dazu in keiner Form angepasst werden. Und ja, der Aufwand ist größer als bei einem Anker. Aber es war dein Wunsch und so wäre er erfüllbar.

Zu der o.g. Funktion scrollIntoView() gibt es auch noch etwas komplexere Alternativen mit der Ermittlung der Position des Ziels am Bildschirm. Siehe: https://stackoverflow.com/questions/13266746/scroll-jump-to-id-without-jquery

Es gibt bei all dem leider aber auch Nachteile:
Besucher ohne JavaScript werden das natürlich nicht ausführen können.
Der Browser der Besucher muss scrollIntoView() kennen. Das müssten heutzutage alle sein, außer man nutzt ein älteres Smartphone.
Für dich ist der Aufwand auch größer als bei einem Anker, da du das Attribut an den Links setzen musst.

Ja, klingt nach viel, aber wenn du es einmal hast, klappt es.

Übrigens noch ein Nachteil den ich vergessen hatte:
Das funktioniert nur wenn die Ziele auf der gleichen Seite sind. Du kannst das nicht verwenden, wenn das Linkziel auf einer anderen Seite ist. Dafür muss man dann wiederum Anker verwenden.