CSS Smooth scroll: effetto scroll della pagina fluido
Tempo di lettura: 4 minuti
Come realizzare in modo personalizzato il css smooth scroll (l’effetto scroll della pagina fluido alle #anchor) senza nemmeno una riga di codice jQuery o Javascript.
Buongiorno a tutti i lettori,
oggi vediamo come realizzare lo smooth scroll in css, quell’effetto piacevole che permette lo scroll da un link ad un ancora sulla pagina, attraverso una semplicissima animazione fluida (effetto molto simile a quello già realizzato nella guida Come aggiungere il pulsante scroll top a WordPress in 5 minuti, animazione realizzata in jQuery).
La guida è semplice ed è alla portata di tutti.
CSS Smooth scroll to anchor (scroll della pagina fluido verso le ancore)
Per realizzare questo scroll fluido, le righe di codice si contano davvero in una mano: vedi il codice qui sotto.
/* Applicare css smooth scroll a tutta la pagina */
html {
scroll-behavior: smooth;
}
Questo codice permette di avere lo scroll smooth in tutta la pagina, se usi WordPress e utilizzi lo style.css lo vedrai su tutto il sito web.
/* Applicare css smooth scroll solo ad ancore custom */
#tuo-id {
scroll-behavior: smooth;
}
Quest’altro codice, invece, permette lo scroll to anchor solo e soltanto ad un ID o classe (basta modificare il selettore iniziale) in modo da poter decidere voi stessi quali ancore debbano avere lo scroll fluido e quali no.
Come inserire il CSS
Come sempre, i modi per andare ad inserire il css sono molteplici:
- all’interno dello style.css
- utilizzando lo strumento “personalizza” di WordPress
Inserire il css all’interno dello style.css
Procuratevi un client ftp come Filezilla e un editor di testo come ad esempio Atom.
Dopo aver eseguito l’accesso tramite FTP con Filezilla, entrate nella cartella del vostro tema (Parent o Child), cercate e andate ad aprire con Atom il file style.css; scorrete fino in fondo allo stile e incollate il css.
Inserire il css utilizzando lo strumento personalizza di WordPress
Se invece siete poco pratici, nella barra di sinistra di WordPress, restate sopra alla voce “aspetto” con il mouse, cliccate su “personalizza” e appena si apre la nuova pagina cliccate su “CSS Aggiuntivo”.
Inserite nell’editor di testo il css.
Velocità dello scroll -> Scroll Smooth Speed
CSS3, nonostante sia molto avanzato e permetta di fare cose che fino a poco tempo fa erano impensabili, non permette la regolazione della velocità di scroll. In caso le vostre necessità siano obbligatoriamente quelle di averlo più lento o più veloce, continuate con la lettura della guida e scoprite come realizzarlo con jQuery.
Compatibilità Scroll Behavior
La compatibilità di questa proprietà CSS è quasi totale (attualmente solo ie, Internet Explorer non è compatibile), ma ci sono vecchie versioni di browser che non sono compatibili e richiedono l’azione di qualche riga di codice da parte di jQuery.
Per l’alta percentuale di compatibilità sconsiglio questa pratica, va solo ad appesantire il vostro file .js
Come ci ricordano gli amici di W3School nella loro pagina (howto css smooth scroll) vediamo insieme il codice da utilizzare per avere la certezza di riuscita per tutti i browser.
jQuery Smooth scroll to anchor
Andiamo a richiamare la libreria jQuery all’interno del tag <head></head> o nel function.php di WordPress.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script>
Inseriamo lo script all’interno della pagina su cui vogliamo che lo scroll smooth funzioni (meglio se all’interno del tag <footer></footer>) o all’interno del vostro main.js se usate WordPress.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
Come accennato poco fa, non solo questo codice permette di avere la piena compatibilità con tutti i browser, ma permette anche la regolazione della velocità di scroll: nell’esempio qui sopra il valore è impostato a 800 (espresso in millisecondi, quindi poco meno di un secondo).
Smooth scroll offset
Molti di voi che stanno seguendo questa guida si saranno accorti che una volta cliccato sul link che rimanda all’ancora, se sul sito c’è la sticky navbar (la navbar sempre visibile anche dopo lo scroll) i contenuti verranno un po’ nascosti da questa.
Non è un errore di css o di impostazioni ma è la semplice interpretazione del css che manda in posizione top:0 l’elemento ancora.
Come ovviare a questo?
andiamo ad usare un piccolo trucco che permette di avere un offset di 100px o di qualsiasi dimensione voi vogliate.
:target {
margin-top: -100px;
padding-top: 100px;
}
Ovviamente potete personalizzarlo a piacimento con dimensioni vostre, in base alla grandezza della vostra navbar.
Se volete vedere qual’è l’offset in questione, guarda l’immagine in cima alla pagina
Conclusioni
Come potete vedere questa guida per il css smooth scroll è davvero alla portata di tutti, principianti, intermedi e esperti (che ovviamente non avranno bisogno di questa guida 😉 ).
Come sempre, se avete bisogno di aiuto, commentate questo articolo, sarò felice di aiutarvi nel mio piccolo.
