Ti è mai capitato di cliccare su una voce del menu che punta a una sezione della pagina e vedere lo scroll fermarsi nel punto sbagliato? Troppo in alto, troppo in basso… insomma, non centra il punto esatto della sezione!
In realtà il browser probabilmente sta facendo esattamente quello che gli hai chiesto, ovvero porta la sezione all’inizio della finestra. Il problema si presenta solitamente quando si usa uno sticky header (o fixed) in quanto quest’ultimo continua a occupare spazio sopra il contenuto, finendo per coprire l’inizio della sezione.
È un comportamento molto comune nei siti one-page, nelle landing page e in generale in tutti i progetti che utilizzano link con ancora (ovvero gli anchor link) e sticky header.
Di recente mi è proprio successo mentre sviluppavo il sito di una cliente e ho pensato di scriverci un’aticolo! Anche perché non serve ricorrere a JavaScript o soluzioni complicate! Bastano poche righe di CSS per risolvere definitivamente il problema. 😎
💡 In breve Se il tuo menu punta correttamente alla sezione ma il titolo finisce nascosto sotto lo sticky header, nella maggior parte dei casi ti basta aggiungere scroll-margin-top alla sezione interessata.
In questo articolo ti spiego meglio perché succede e quali sono le soluzioni più efficaci, con particolare riferimento a Bricks Builder, ma applicabili praticamente a qualsiasi sito WordPress, realizzato con qualsiasi builder!
Cosa trovi nell’articolo
Cos’è un anchor link?
Un anchor link (o link con ancora) è un collegamento che porta l’utente direttamente a una specifica sezione della stessa pagina.
Ad esempio:
<a href="#contatti">Contatti</a>Quando l’utente clicca sul link, il browser cerca un elemento con questo ID:
<section id="contatti">e scorre automaticamente la pagina fino a raggiungerlo.
È una tecnica molto utilizzata nei siti one-page, nelle landing page e nei menu di navigazione per rimandare l’utente a un punto specifico della pagina.
Perché l’anchor link scrolla a metà della sezione?
Il browser, quando raggiunge un anchor link, posiziona l’elemento nella parte superiore della finestra.
Il problema nasce quando in alto è presente uno sticky header.
L’header infatti, rimane sempre visibile sopra al contenuto e finisce quindi per coprire proprio l’inizio della sezione, per cui il browser non è che sta sbagliando rimandandoti troppo sotto alla sezione, semplicemente non sa che sopra al contenuto è presente un elemento fisso! Ed ecco che nasce il problema.
La soluzione migliore è usare scroll-margin-top
La soluzione più elegante consiste nell’utilizzare la proprietà CSS scroll-margin-top.
Ad esempio:
#contatti{
scroll-margin-top:100px;
}oppure, se tutte le sezioni del sito devono comportarsi nello stesso modo:
section{
scroll-margin-top:100px;
}In questo modo il browser, quando esegue lo scroll verso l’anchor, lascerà automaticamente uno spazio di 100px sopra alla sezione.
Il vantaggio è che in questo modo non si modifica il layout della pagina, né si aggiungono margini o padding, e funziona solo durante lo scroll verso gli anchor link!
Come applicarlo sul tuo sito WordPress
Poco importa se utilizzi Bricks Builder, Elementor, Divi o altri builder procedura è davvero semplice!
Di seguito ti mostrerò degli screen usando Bricks Builder, ma appunto, tu inseriscilo dove necessario in base al builder che stai utilizzando!
1. Assegna un ID alla sezione
Seleziona la sezione desiderata e inserisci un ID, ad esempio io userò “contatti” in quanto serve per rimandare a una sezione con un modulo di contatto.
#contattioppure, se il link viene inserito in un’altra pagina rispetto alla sezione desiderata, ricordati di inserire l’intero percorso, quindi:
https://tiltuositoweb.it/nomepagina/#contatti3. Aggiungi il CSS
Nel CSS globale (o dove meglio credi) inserisci:
#contatti{
scroll-margin-top:100px;
}Sostituisci quei 100px aggiuntandoli in base all’altezza del tuo sticky header.
Et voilà… è stato facile no!?
Non servono plugin aggiuntivi, JavaScript o workaround particolari…
Personalmente preferisco creare una classe dedicata, ad esempio .anchor.section, e applicare a quella il CSS. In questo modo, ogni volta che una sezione deve essere raggiungibile tramite un anchor link, mi basta assegnarle la classe, senza dover duplicare il codice o creare regole specifiche per ogni ID.
Questo approccio è l’ideale, anche perchà segue il principio DRY (Don’t Repeat Yourself), una delle buone pratiche fondamentali nello sviluppo software. L’obiettivo è evitare di duplicare codice, rendendolo più pulito, riutilizzabile e semplice da mantenere nel tempo, in questo mod se in futuro dovessi modificare l’offset dello scroll, ti basterà intervenire in un unico punto, senza dover aggiornare ogni singola sezione!
Per cui il CSS che ho usato è:
.anchor-section {
scroll-margin-top:100px;
}E se il mio header ha un’altezza diversa da mobile?
Può succedere di assegnare altezze diverse all’header a seconda della visualizzazione, ad esempio:
- Desktop → header alto 120px
- Tablet → header alto 90px
- Mobile → header alto 70px
In questo caso puoi utilizzare le media query.
.anchor-section {
scroll-margin-top:120px;
}
@media (max-width:991px) {
.anchor-section {
scroll-margin-top:90px;
}}
@media (max-width:767px) {
.anchor-section {
scroll-margin-top:70px;
}}In questo modo ogni dispositivo utilizzerà il valore corretto!
Ovviamente, devi cambiare le altezze a seconda di quelle che hai usato sul tuo sito!
Conclusione
Quando un anchor link sembra “fermarsi nel punto sbagliato”, il problema non è quasi mai WordPress, Bricks Builder o il browser… Nella maggior parte dei casi è semplicemente lo sticky header che copre l’inizio della sezione!
Fortunatamente esiste una soluzione semplice, ovvero utilizzare scroll-margin-top!
È una piccola accortezza che migliora immediatamente l’esperienza di navigazione, rende il codice più ordinato e ti evita di ricorrere a plugin o script aggiuntivi, ricorda “less is more“! 😉
