Un pulsante torna in alto WordPress JavaScript consente ai visitatori di risalire rapidamente all’inizio di una pagina lunga. La soluzione proposta usa JavaScript puro, un piccolo foglio CSS e il tema child di WordPress, senza installare plugin aggiuntivi. Il pulsante rimane nascosto finché l’utente non scorre la pagina e include un’etichetta comprensibile per tastiere e screen reader. Il codice rispetta la preferenza di sistema per la riduzione delle animazioni e mantiene un’area di attivazione adatta anche agli schermi touch. Per evitare la perdita delle modifiche durante gli aggiornamenti del tema, i file devono essere inseriti in un tema child o in un plugin personalizzato.

Come preparare i file per il pulsante torna in alto

Il metodo più ordinato consiste nel creare un file JavaScript e un file CSS nella cartella del tema child. Un tema child permette di personalizzare WordPress senza modificare direttamente i file del tema principale.

La struttura può essere simile a questa:

wp-content/
└── themes/
└── nome-tema-child/
├── functions.php
├── style.css
├── assets/
│   ├── js/
│   │   └── back-to-top.js
│   └── css/
│       └── back-to-top.css

Il codice funziona con i temi classici che includono il hook wp_footer. Nei temi a blocchi, il markup può essere inserito anche tramite un blocco HTML personalizzato o un plugin, mentre il caricamento degli asset resta gestibile da functions.php.

Passo 1: registrare JavaScript e CSS in WordPress

Apri il file functions.php del tema child e aggiungi una funzione collegata a wp_enqueue_scripts. WordPress caricherà i due file solo nella parte pubblica del sito, evitando di inserirli nell’area amministrativa.

function backdigit_enqueue_back_to_top_assets() {
$theme_directory = get_stylesheet_directory_uri();
$theme_path = get_stylesheet_directory();

wp_enqueue_style(
'backdigit-back-to-top',
$theme_directory . '/assets/css/back-to-top.css',
array(),
filemtime($theme_path . '/assets/css/back-to-top.css')
);

wp_enqueue_script(
'backdigit-back-to-top',
$theme_directory . '/assets/js/back-to-top.js',
array(),
filemtime($theme_path . '/assets/js/back-to-top.js'),
true
);
}
add_action('wp_enqueue_scripts', 'backdigit_enqueue_back_to_top_assets');

filemtime() assegna al file la data dell’ultima modifica e aiuta il browser a caricare la versione aggiornata dopo un cambiamento. Se il server non consente di leggere la data del file, sostituisci filemtime(...) con una versione manuale, ad esempio '1.0.0'.

Passo 2: inserire il pulsante nel piè di pagina

Aggiungi nello stesso file functions.php una funzione che stampa il pulsante prima della chiusura del tag HTML body. Il testo visibile rende l’azione comprensibile anche senza icone, mentre aria-label fornisce un’etichetta esplicita alle tecnologie assistive.

function backdigit_render_back_to_top_button() {
?>
<button
type="button"
class="back-to-top"
aria-label="Torna all'inizio della pagina"
aria-hidden="true"
hidden>
Torna in alto
</button>
<?php
}
add_action('wp_footer', 'backdigit_render_back_to_top_button', 20);

L’attributo hidden impedisce al pulsante di occupare spazio e di essere raggiunto dalla tastiera prima dello scorrimento. JavaScript lo rimuoverà quando la pagina avrà superato la soglia stabilita.

Come rendere il pulsante visibile e accessibile

Il foglio CSS posiziona il comando in basso a destra, mantiene un contrasto elevato e mostra un contorno evidente quando il pulsante riceve il focus da tastiera. Il selettore [hidden] garantisce che l’elemento resti realmente nascosto prima dell’interazione necessaria.

Crea assets/css/back-to-top.css e inserisci:

.back-to-top {
position: fixed;
right: max(1rem, env(safe-area-inset-right));
bottom: max(1rem, env(safe-area-inset-bottom));
z-index: 1000;
min-width: 10rem;
min-height: 3rem;
padding: 0.75rem 1rem;
border: 2px solid #ffffff;
border-radius: 0.5rem;
background: #1d4ed8;
color: #ffffff;
cursor: pointer;
font: inherit;
font-weight: 700;
line-height: 1.2;
box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 25%);
}

.back-to-top[hidden] {
display: none;
}

.back-to-top:hover {
background: #1e3a8a;
}

.back-to-top:focus-visible {
outline: 3px solid #facc15;
outline-offset: 3px;
}

@media (max-width: 480px) {
.back-to-top {
right: 1rem;
bottom: 1rem;
min-width: auto;
width: calc(100% - 2rem);
}
}

@media (prefers-reduced-motion: reduce) {
.back-to-top {
scroll-behavior: auto;
}
}

Il pulsante ha un’altezza minima di 48 pixel, una dimensione adatta all’uso touch e un focus visibile. Il colore del contorno giallo migliora l’individuazione del focus, ma il contrasto finale deve essere verificato anche rispetto ai colori specifici del tema WordPress utilizzato.

Come aggiungere il comportamento JavaScript

Il file JavaScript controlla lo scorrimento della pagina e mostra il pulsante dopo 400 pixel. Al clic, window.scrollTo() riporta l’utente all’inizio con un’animazione fluida, tranne quando il sistema operativo comunica la preferenza prefers-reduced-motion: reduce.

Crea assets/js/back-to-top.js con questo contenuto:

(function () {
'use strict';

const button = document.querySelector('.back-to-top');

if (!button) {
return;
}

const reduceMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
);

function updateButtonVisibility() {
const isVisible = window.scrollY > 400;

button.hidden = !isVisible;
button.setAttribute('aria-hidden', String(!isVisible));
}

function scrollToTop() {
window.scrollTo({
top: 0,
behavior: reduceMotion.matches ? 'auto' : 'smooth'
});
}

window.addEventListener('scroll', updateButtonVisibility, {
passive: true
});

button.addEventListener('click', scrollToTop);

updateButtonVisibility();
}());

addEventListener() mantiene separati il comportamento JavaScript e il markup generato da WordPress. L’opzione passive: true indica che il gestore dell’evento di scorrimento non blocca la pagina durante il movimento.

La soglia di 400 pixel è un valore funzionale, ma può essere modificata. Per mostrare il pulsante prima, cambia window.scrollY > 400 in window.scrollY > 250; per mostrarlo più tardi, aumenta il valore. Non esiste una soglia universale valida per tutti i siti, perché dipende dalla lunghezza dei contenuti e dalla struttura del tema.

Come verificare il funzionamento in WordPress

Dopo aver salvato i file, apri una pagina lunga del sito in una finestra privata del browser. Il pulsante deve restare nascosto all’inizio e comparire quando la pagina supera la soglia di scorrimento.

Controlla questi aspetti prima di pubblicare la modifica:

Il pulsante appare dopo lo scorrimento e scompare tornando all’inizio.
Il testo “Torna in alto” è leggibile su desktop e smartphone.
Il comando può essere raggiunto premendo il tasto Tab.
Il contorno del focus rimane visibile durante la navigazione da tastiera.
La pressione di Invio o della barra spaziatrice attiva il ritorno all’inizio.
La console del browser non mostra errori JavaScript.
Il pulsante non copre elementi importanti, come banner per i cookie o controlli di navigazione.
L’animazione viene disattivata quando è attiva la riduzione del movimento.

Per una verifica più ampia, utilizza gli strumenti di accessibilità integrati in Google Chrome o Mozilla Firefox e prova il sito anche con JavaScript disattivato. Senza JavaScript il pulsante resterà nascosto, ma il contenuto della pagina dovrà continuare a essere leggibile e navigabile.

Se il pulsante non compare, controlla che wp_footer() sia presente nel file footer.php del tema e che i percorsi assets/js/back-to-top.js e assets/css/back-to-top.css corrispondano esattamente ai nomi delle cartelle. La documentazione ufficiale di wp_enqueue_script() descrive il caricamento corretto degli script in WordPress.

Un plugin di ottimizzazione o una cache possono mantenere una versione precedente dei file. Dopo la modifica, svuota la cache del plugin, del server e del browser, quindi verifica nuovamente il codice sorgente della pagina.

Il pulsante torna in alto WordPress JavaScript è una soluzione leggera, accessibile e facilmente adattabile al design del sito.

Potrebbe interessarti anche:

FAQ

Sì. Puoi inserirlo in un tema child usando functions.php, un file JavaScript e un file CSS. Il tema child evita che gli aggiornamenti del tema principale cancellino le modifiche.

Sì. L’elemento HTML button è raggiungibile con il tasto Tab e può essere attivato con Invio o barra spaziatrice. Il CSS mantiene visibile il contorno del focus.

Controlla che il tema esegua wp_footer(), che i percorsi dei file siano corretti e che la cache sia stata svuotata. Gli errori JavaScript possono essere verificati nella console del browser.

Sì. Nel file back-to-top.js modifica il valore 400 nella condizione window.scrollY > 400. Un valore più basso mostra il pulsante prima.

Il codice usa automaticamente lo scorrimento istantaneo quando il dispositivo segnala prefers-reduced-motion: reduce, rispettando la preferenza per ridurre le animazioni.

Altri articoli di questa serie: