La navigazione ancorata scorre su una posizione non corretta

Alcuni temi usano la navigazione ancorata che serve a non caricare una nuva pagina quando si fa clic su un link interno; il clic serve a far scorrere la pagina verso una sezione specifica della stessa. Questo tipo di navigazione è molto usata con alcuni tipi di landing page (“one-pager”).

Errore: l'obiettivo dello scorrimento interno viene mancato

  • LazyLoad è attivato in WP Rocket.
  • Fai clic su qualsiasi link di navigazione che abbia l'obiettivo di scorrere la pagina a un punto più basso della stessa (fuori dall'area visibile della pagina).
  • Lo scorrimento automatico si interrompe su una posizione incorretta: l'obiettivo dello scorrimento è stato mancato.

Soluzione: disattivare LazyLoad

La soluzione per correggere questo comportamento è disattivare LazyLoad, almeno nelle pagine che stanno usando questo tipo di navigazione.
 Disabilitare LazyLoad su post specifici

Perché succede?

Gli obiettivi dello scorrimento interno vengono calcolati al momento del caricamento della pagina da parte del browser. Una volta che la pagina è stata completamente caricata, il browser “conosce” la posizione di ogni obiettivo di scorrimento e quindi può scorrere verso quell'esatta posizione appena fai clic sul link del menu.

Tuttavia, con il LazyLoad attivo, le immagini fuori dall'area iniziale di visualizzazione della pagina non vengono caricate direttamente. Per cui la posizione degli elementi che il browser ha calcolato sulla pagina ora sono distorti. 

Una volta che inizi a scorrere la pagina, le immagini in LazyLoad iniziano ad apparire e si aggiungono all'altezza totale del documento, per cui quegli elementi di cui il tuo browser “conosceva” la posizione inizialmente, vengono spinti in basso alla pagina.