Fehler beim Scrollen - URL mit Ankerlinks

maariaa

Hallo an alle :)

Mir ist aufgefallen, das die Adresse von meinem One Page Theme beim Scrollen den Anker nicht ändert.

Wenn ich die Menüpunkte anklicke wird korrekt angezeigt wo ich mich gerade befinde, zum Beispiel: http://testtheme.bplaced.net/#seite3

Jetzt hätte ich gerne, dass das auch beim Scrollen so funktioniert, weil es verwirrend ist wenn ich mich auf dem Abschnitt Seite 5 befinde und #seite 3 angezeigt wird.

Macht man das mit JavaScript oder in der htaccess, oder liege ich da völlig falsch?
Leider habe ich mich mit diesen zwei Dingen bisher noch nicht, bzw. sehr wenig beschäftigt, darum wäre es am besten für mich wenn jemand ein Tutorial oder eine Step by Step Anleitung kennt.

Ich bin auch über alternative Lösungen froh. Ich habe auch schon daran gedacht, die Unterseiten komplett wegzulassen, weiß aber leider auch nicht wie das funktioniert. Unter Seite bearbeiten -> Permalink bearbeiten lässt sich der Name ändern, aber nicht ganz weglöschen.

Wie immer vielen Dank und liebe Grüße

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

FiedlWdd

Ist war noch nicht perfekt, aber dieser kleine Workaround würde dir wahrscheinlich schon viel bringen.

Du hast zur Zeit im Footer im script-Teil folgendes:

Code

jQuery(window).scroll(function() {
   if (jQuery(this).scrollTop()) {
     jQuery('#toTop').fadeIn();
   } else {
     jQuery('#toTop').fadeOut();
   }
});

Füge dafür folgenden Code ein:

Code

jQuery(window).scroll(function() {
      if (jQuery(this).scrollTop()) {
                jQuery('#toTop').fadeIn();
            } else {
                jQuery('#toTop').fadeOut();
            }


      var menuHeight = jQuery( '.menu-hauptnavigation-container' ).height();
      var acutalPage = '';
      var actualWindowPosition = jQuery(window).scrollTop();
      jQuery('section').each( function( i, val ) {
        var sectionPart = jQuery( this );
        var sectionID = sectionPart.attr( 'id' );


        if( sectionPart.offset().top < ( actualWindowPosition + menuHeight ) ) {
          acutalPage = sectionID;
        }
      });
      
      var pushUrl = '';
      if( acutalPage != '' ) {
        pushUrl = '#' + acutalPage;
      }
      
      window.history.pushState(acutalPage, 'Titel', pushUrl);
    });

Alles anzeigen

Also bei mir läuft es soweit, nur wenn man ganz nach oben scrollt, behält er #seite5.
Vielleicht kann das ja noch jemand erweitern, so dass an dieser Stelle auch passt.

maariaa

Dankeschön :) Das funktioniert soweit, mit dem "Ganz nach oben Scrollen Problem" kann ich leben.

Allerdings habe ich jetzt ein anderes Problem. Es liegt an meinem ToTop Pfeilchen.
Dieses habe ich zusätzlich zu dem Code von FiedlWdd eingebaut. Ich kanns klicken, es bringt mich auch wie gewünscht nach oben. Nur dann hänge ich fest. Wenn ich wieder runterscrollen möchte, passiert gar nichts. Bei Klick auf die Menüpunkte wird die Url richtig angezeigt, die Seite erscheint aber nicht. Einzig und allein Home reagiert wie gewünscht.

Wie kann ich es schaffen, dass auch das zusätzlich funktioniert?

Liebe Grüße

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Fehler beim Scrollen - URL mit Ankerlinks

Jetzt mitmachen!