Smooth Scroll und Sprachen URL

[Bennie]

Nutzt jemand von euch das Smooth Scroll Script von cferdinandi ?
Ich habe damit ein spezielles Problem und zwar gibt es in den Optionen die Möglichkeit

updateURL: true, // Update the URL on scroll 

Ich habe eine Installation mit mehreren Sprachen und das Sparchkürzel in der URL also sieht eine URL z.B. so bei mir aus

http://example.com/en/

Wenn ich jetzt einen Ankerlink einrichte dann soll nach Klicken desselbigen mit der o.g. Script Option, so etwas herauskommen

http://example.com/en/#anker

Das klappt aber nicht denn das Sprachkürzel wird nach dem Klick auf den Ankerlink "rausgeschmissen" und die URL sieht dann so aus

http://example.com/#anker

das führt bei Klick auf einen weiteren Ankerlink dazu dass die Seite neu geladen wird weil der Anker ja wieder auf

http://example.com/en/#anker

verweist.

Ohne die Sprachkürzel Funktion geht es einwandfrei , leider ist die aber in meinem Fall erwünscht.
Das man auch ein anderes Script nehmen kann ist klar, hatte ich auch, aber dieses hier bietet eben noch einige andere Möglichkeiten die ich gerade für Onepages ganz nützlich finde

Kann ja sein, dass jemand dieses Script ebenfalls einsetzt und das Problem kennt und/oder lösen konnte.

Grüße
Bennie

[Andreas]

Ich kenne dieses smooth-scroll nicht, aber schau dir bitte nochmal genau im Quelltext die HREFs in deinen Links an. Die dürften eigentlich nicht

http://example.com/en/#anker

sondern z.B. so lauten

en/contact.html#anker

http://example.com/en/, http://example.com/de/ wäre ja immer die Startseite (index.html)

Zusätzlich müsstest du einen BASE-Tag im HEAD haben, der so aussieht

<base href="https://example.com/">

Wenn dein BASE und deine HREFs so aussehen wie oben von mir beschrieben und es dann immer noch nicht funktioniert, würde ich an deiner Stelle im Ticketsystem danach fragen.

Beachte auch: Normalerweise (wenn man kein BASE im HEAD hat) reicht ein

href="#anker"

egal ob du gerade auf

• example.com
• example.com/en/
• example.com/en/contact.html

bist. Der Browser bleibt immer auf der gleichen Seite im gleichen Ordner. Hast du aber ein BASE, dann wird ein

href="#anker"

immer auf BASE-HREF#anker verweisen z.B. https://example.com/#anker. Egal auf welcher Seite/Ordner du bist.

BTW, mit dem Insterttag {{env::request}} kann man die aktuelle Seite/Ordner vor den Anker schreiben

{{env::request}}#anker

[Bennie]

Ich kenne dieses smooth-scroll nicht, aber schau dir bitte nochmal genau im Quelltext die HREFs in deinen Links an. Die dürften eigentlich nicht
http://example.com/en/#anker

sondern z.B. so lauten

Ja aber auf der Startseite sehen die so aus, und auf anderen Seiten wie von Dir beschrieben, also so

example.com/en/contact.html#anker 

und ich habe u.a. auch

{{env::request}}#anker 

genutzt aber das ändert ja nichts.

Ich hatte das Problem neulich schon bei einer Onepage die ich mithilfe des Moduls Artikelliste (als Navigation) erstellt hatte, dort passierte genau dasselbe.

[Andreas]

Hast du mal ohne das Smooth-Scroll probiert? Bei mir in der Demo geht das Anspringen auf der Startseite mit diesen Möglichkeiten:

BASE: https://example.org/

HREF:

• #footer
• en/#footer
• https://example.org/#footer
• https://example.org/en/#footer

In allen Fällen steht in der Address-Bar im Firefox nachher https://example.org/en/#footer.

Hast du sichergestellt, dass der Alias deiner ersten Seite "index" heißt?

[Bennie]

Ja index ist vergeben - und all diese Möglichkeiten klappen bei mir auch ohne das Script.
Ich habe mal mit diesem getestet:

<script>
$(document).ready(function(){
  $('a[href*="#"]').on('click', function(event) {  
    if (this.hash !== "") { 
    
          event.preventDefault();
          
      var hash = this.hash;
      
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        window.location.hash = hash;
      });
    } 
  });
});
</script>

das klappt gut aber mit dem Offset bekomm ich das nicht entsprechend hin in Verbindung mit einer fixed Navigation.

Mein Ziel ist eigentlich:
Smooth Scroll mit Anker in der URL nach Klick , dann muss es zum entsprechenden Anker scrollen und auch noch eine Offset Funktion haben,
da die Navigation beim nach unten scrollen bei >200px zu einer fixed Navigation wird - also muss ein entsprechendes Offset berechnet werden.

Ich hatte das schon mit der jquery .offset() probiert, das führte aber dazu dass zwar zu richtigen Stelle gescrollt wird aber sobald der Anker dann an die URL gehängt wird
zuckt es und rutscht doch wieder ohne das Offset nach oben.

[Andreas]

Hier 2 Snippets aus meinem Fundus.

Anchornav:

anchornav.find('a').on('click', function(ev) {
  ev.preventDefault();
  $('html, body').animate({
    scrollTop: $($(this).prop('hash')).offset().top - $('header').outerHeight() - 30
  }, 400);
}); 

Das hier von j_accordion-extended.html5:

...
activate: function(event, ui) {
  ...
  /** Scroll active accordion to top */
  if(ui.newHeader.length > 0) {
    var
      previousTogglerHeight = ui.newHeader.closest('.ce_accordion').prev('.ce_accordion').find('.toggler').outerHeight() || 0,
      previousAccordionMarginBottom = parseInt(ui.newHeader.closest('.ce_accordion').prev('.ce_accordion').css('margin-bottom')) || 0
    ;

    if(previousTogglerHeight)
    {
      $('html, body').animate({scrollTop: ui.newHeader.offset().top - previousTogglerHeight - previousAccordionMarginBottom - 5}, 300);
    }
  }
  /** Scroll active accordion to top - END */
}
... 

Vielleicht kannst du dir da was abschauen. In der Konsole auch immer nach JS-Fehlern Ausschau halten.

Das hier ist bestimmt falsch.

$(hash).offset().top
console.log(hash); 

Ich glaube in hash ist die Raute "#" nicht mit drin.