Support » Allgemeine Fragen » Anchor für Links/Menü auf separaten Seite funktionieren nicht

  • Gelöst roehrleit

    (@roehrleit)


    Hallo zusammen!

    Habe folgendes Problem:
    Über die Menüpunkte werden die entsprechenden Seiten-Container „smooth gescrollt“ aufgerufen.
    Solange man sich auf der Hauptseite befindet funktioniert das auch ganz gut. Bzgl. der Performance wurde der Onepager für detailliertere Bilder auf separate Galerie-Seiten ausgelagert:
    https://roessle-mulfingen.de/gerichte/
    https://roessle-mulfingen.de/gaststaette/

    Sobald man sich auf einer dieser Seiten befindet funktionieren die #links auf der hauptseite nicht mehr…

    Theme: Grand Restaurant | https://themes.themegoods.com/grandrestaurant/demo1/

    Kann mir jemand sagen was hierfür zu tun ist?

    Besten Dank vorab!

    • Dieses Thema wurde geändert vor 1 Monat, 3 Wochen von roehrleit.
    • Dieses Thema wurde geändert vor 1 Monat, 3 Wochen von roehrleit.
    • Dieses Thema wurde geändert vor 1 Monat, 3 Wochen von roehrleit.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 10 Antworten - 1 bis 10 (von insgesamt 10)
  • Wenn du einen relativen Link zu einem Anker setzt – also z.B. <a href="#menu">Menü</a> – funktioniert dieser Link nur auf der Webseite, auf der auch ein Anker <a name="menu">Menü</a> oder <div id="menu">Menü</div> gesetzt wurde. Bist du auf einer anderen Seite, sucht der Browser nach dem Anker auf der aktuell angezeigten Webseite, findet ihn nicht und kann deshalb auch nichts aufrufen. Um tatsächlich auf die andere Webseite und dort zum Anker zu springen, musst du einen absoluten Link, also mit Angabe der Domain und Webseite setzen – z.B. <a href="https://example.com/#menus>Menu</a>, wenn sich der Anker „Über uns“ auf der Startseite der Website mit der URL example.com befindet. Wenn du das Navigationsmenü bearbeitest, musst der individuelle Link z.B. so aussehen:

    Screenshot Einstellungen

    Hallo @roehrleit

    hast du es mal mit absoluten URLs versucht? Also in deinem Fall z. B.:
    https://roessle-mulfingen.de/#about

    Edit:
    Bego Mario war schneller.

    Thread-Ersteller roehrleit

    (@roehrleit)

    ja, hatte ich schon versucht.
    Allerdings scrollt es dann nicht mehr „sanft“, d.h. es springt ziemlich unschön.

    Hab es aktuell für HOME, ÜBER UNS und SPEISEKARTE so eingestellt, GALERIE und KONTAKT ist noch alt mit #XY

    Außer dafür gibt es einen Workaround?!

    Besten Dank schon mal!

    • Diese Antwort wurde geändert vor 1 Monat, 3 Wochen von roehrleit.

    Dann ist die hinterlegte JavaScript-Funktion fehlerhaft.
    Bei gekauften Themes können wir dir nicht weiterhelfen.

    Thread-Ersteller roehrleit

    (@roehrleit)

    Habe es nun mit dem Plugin Page Scroll to id versucht:
    https://de.wordpress.org/plugins/page-scroll-to-id/

    D.h. ich habe es nach Anleitung eingerichtet, allerdings verhält es sich immer noch gleich?
    Habe quasi dasselbe Problem wie hier, nur dass das Springen von einer anderen Seite auf den Menü-Link nicht funktioniert:
    https://wordpress.org/support/topic/doesnt-scroll-with-wp-menu-anchor-on-same-page/

    Was soll ich jetzt dazu schreiben, wenn mir das Theme nicht für einen Test zur Verfügung steht?

    Dein Theme verwendet eine JavaScript-Datei custom_onepage.js. Darin ist unter anderem folgender Code:

    jQuery('#menu_wrapper div .nav li a, .mobile_main_nav li a').on( 'click',
     function(event){
      var documentScroll = jQuery(document).scrollTop();
      var linkURL = jQuery(this).attr('href');
    	
      if(linkURL.slice(0,1)=='#')
      { …

    Bedeutet umgangssprachlich ausgedrückt:
    „wenn jemand auf einen Link im Menü klickt
    führe folgende Funktion aus:
    lies den Link aus
    wenn das erste Zeichen im Link ein # ist …

    Das heißt, dass die Funktion zum sanften Scrollen nur ausgeführt wird, wenn der Link ausschlielich einen Anker enthält (<a href="#wasauchimmer">), aber nicht, wenn er die absolute URL enthält (<a href="https://example.com#wasauchimmer">). Der Programmierer ist also vermutlich davon ausgegangen, dass die Funktion nur verwendet wird, wenn die Website (die gesamte Internetpräsenz) aus einer einzelnen Webseite (HTML-Dokument) besteht. Ob er deswegen die Datei custom-onepage.js genannt hat?
    Wie gesagt, ich halte das für eine fehlerhafte Programmierung, weil absolute Pfade nicht berücksichtigt werden (auch wenn kein Programmierfehler ausgegeben wird – für eine einzelne Webseite funktioniert das ja einwandfrei).

    Im zitierten Support-Thread des Plugins wird empfohlen, den Menüeinträgen eine CSS-Klasse zuzuweisen. Der Plugin-Entwickler gibt ja auch einen Link für eine Anleitung mit Bild an. Das kannst du ja ausprobieren.

    http://manos.malihu.gr/wp-content/uploads/2017/01/page-scroll-to-id-target-menu-class-3.png

    Thread-Ersteller roehrleit

    (@roehrleit)

    Vielen Dank für die schnelle und ausführliche Beschreibung.
    Hab das auch schon versucht – ohne Funktion, bin am verzweifeln.

    Kann mir jemand ein Mobile Menu-Plugin empfehlen, welche man für explizite Seiten auf separate Menüs verlinken kann?
    Für Desktops hätte ich den Workaround für die „Problemseiten“ ein eigenes Menü mit absoluten Pfaden zu hinterlegen. In diesem Theme lässt sich das jedoch leider nicht für das mobile menu hinterlegen

    Habe es nun mit dem Plugin Page Scroll to id versucht:
    https://de.wordpress.org/plugins/page-scroll-to-id/

    Ich hab das bei einem Kunden im Einsatz und kann dir versichern, dass dieses Plugin dort einwandfrei funktioniert. Hilft vermutlich nicht direkt weiter, aber zumindest kannst du das Plugin als Ursache ausschließen.

    Hallo,
    auch wir haben das Plugin Page Scroll to id bei einem Projekt im Einsatz – keine Probleme.
    Viele Grüße
    Hans-Gerd

    Thread-Ersteller roehrleit

    (@roehrleit)

    Vielen Dank für die Rückmeldungen, mit der vollen URL/#anchor in Verbindung mit dem Plugin konnte es nun gelöst werden!

Ansicht von 10 Antworten - 1 bis 10 (von insgesamt 10)