1. Calcola l’ingombro dell’Header
Quando clicchi su un link che punta a una sezione (es. #contatti), il browser di solito porta quella sezione in cima alla pagina. Se hai un menu fisso in alto, questo coprirà i primi pixel della sezione (spesso il titolo).
- Cosa fa lo script: Calcola l’altezza del tuo header (
#hdr) e sottrae quella misura dalla posizione finale dello scorrimento. In questo modo, la sezione si ferma esattamente sotto il menu.
2. Scorrimento Fluido (Smooth Scrolling)
Invece di un “salto” immediato e brusco alla sezione desiderata, lo script forza il browser a scivolare dolcemente verso il basso, migliorando l’esperienza utente.
3. Gestione dei Link Dinamici
Utilizza la “delegazione degli eventi” (document.addEventListener('click', ...)). Questo significa che lo script funziona anche su bottoni o link caricati in un secondo momento (es. tramite AJAX o widget dinamici) senza dover ricaricare lo script.
4. Risolve i problemi di caricamento di Elementor
I page builder come Elementor a volte impiegano qualche frazione di secondo per calcolare le altezze corrette della pagina.
- La soluzione nel codice: Lo script contiene dei “delay” (ritardi di 60ms, 350ms e 500ms). Se un utente arriva sul sito tramite un link diretto a una sezione (es.
tuosito.it/#servizi), lo script aspetta che la pagina sia pronta prima di scrollare, evitando che la posizione sia sbagliata.
5. Aggiorna l’URL senza ricaricare
Usa history.pushState. Quando clicchi su un link, l’indirizzo nella barra del browser si aggiorna (aggiungendo #sezione), ma senza causare lo sfarfallio o il salto tipico del comportamento standard del browser.
In sintesi, ti serve se:
- Hai un header fisso che copre i titoli delle sezioni quando ci clicchi sopra.
- Vuoi che lo scorrimento sia morbido ed elegante.
- Vuoi che i link funzionino bene anche se l’utente arriva sulla pagina da un link esterno che punta a un’ancora specifica.
Nota tecnica: Se cambi l’ID del tuo header nel sito, ricordati di modificare questa riga nel codice: const HDR_SELECTOR = '#hdr'; (sostituisci #hdr con l’ID corretto del tuo header).
