Pulsante Scroll-to-Top 2026: Guida Completa con Web Component
Perché il pulsante scroll-to-top è ancora rilevante nel 2026
Il pulsante “torna in cima” sembra un componente banale — uno di quelli che ogni developer realizza il primo giorno e poi dimentica. Eppure, nel 2026, è ancora uno degli elementi UI più trascurati nei siti web. La maggior parte delle implementazioni che si trovano online presenta tre problemi ricorrenti: animazioni a scatti, nessuna gestione dell’accessibilità, e codice rigidamente legato al singolo progetto.
Questa guida aggiornata affronta il tema in modo completo. Vedrai come costruire un pulsante scroll-to-top partendo dal CSS moderno con scroll-behavior e @starting-style, passando per JavaScript vanilla con IntersectionObserver, fino a incapsulare tutto in un Web Component riutilizzabile che puoi copiare da progetto a progetto senza dipendenze esterne. Se vuoi capire meglio come funzionano i Web Component in generale, l’articolo su cosa sono i Web Components e come usarli è il punto di partenza ideale. Il refresh è giustificato anche dalla popolarità dell’articolo originale: oltre 765 visualizzazioni, e le domande nei commenti mostrano che la versione Web Component mancava. La colmiamo oggi.
Il punto di partenza: HTML e CSS moderno
Prima di toccare JavaScript, costruiamo la struttura HTML semantica e lo stile CSS. Un pulsante scroll-to-top è esattamente quello che sembra: un <button>. Non un <div>, non un <a> — un <button>, con tutti gli attributi ARIA necessari.
<!-- HTML: struttura base -->
<button
id="scroll-top-btn"
class="scroll-top-btn"
aria-label="Torna in cima alla pagina"
title="Torna in cima"
hidden
>
<svg aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
</button>L’attributo hidden nasconde il pulsante di default in modo semantico — più corretto di un display:none in CSS perché segnala agli screen reader che l’elemento non è disponibile. Aggiungiamo ora il CSS completo. La novità del 2026 è l’uso di @starting-style per animare l’entrata del pulsante senza JavaScript.
/* Variabili custom properties */
:root {
--stt-size: 48px;
--stt-bg: #06b6d4;
--stt-color: #fff;
--stt-radius: 50%;
--stt-bottom: 2rem;
--stt-right: 2rem;
--stt-shadow: 0 4px 14px rgba(6, 182, 212, 0.35);
--stt-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-top-btn {
position: fixed;
bottom: var(--stt-bottom);
right: var(--stt-right);
z-index: 9999;
width: var(--stt-size);
height: var(--stt-size);
border-radius: var(--stt-radius);
border: none;
cursor: pointer;
background-color: var(--stt-bg);
color: var(--stt-color);
box-shadow: var(--stt-shadow);
display: grid;
place-items: center;
/* Transizioni per opacity e transform */
transition:
opacity var(--stt-transition),
transform var(--stt-transition),
background-color var(--stt-transition);
/* Animazione di entrata con @starting-style (Chrome 117+, Firefox 129+) */
@starting-style {
opacity: 0;
transform: translateY(12px) scale(0.8);
}
}
/* Stato nascosto gestito via [hidden] */
.scroll-top-btn[hidden] {
display: none;
}
/* Hover e focus */
.scroll-top-btn:hover {
background-color: #0891b2;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(6, 182, 212, 0.45);
}
.scroll-top-btn:focus-visible {
outline: 3px solid var(--stt-bg);
outline-offset: 3px;
}
.scroll-top-btn:active {
transform: translateY(0) scale(0.96);
}
/* Rispetta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.scroll-top-btn {
transition: opacity 0.1s linear;
}
}Il trucco di @starting-style è elegante: definisce i valori prima che l’elemento diventi visibile, così il browser interpola automaticamente verso i valori finali. Niente keyframes, niente classi aggiuntive. Se stai lavorando su animazioni CSS moderne, la guida alle transizioni CSS fluide e tecniche moderne approfondisce questo approccio con molti altri esempi pratici.
JavaScript vanilla con IntersectionObserver
L’approccio classico usa un listener su window.scroll con throttle manuale — fragile e potenzialmente costoso. Nel 2026 la scelta corretta è IntersectionObserver: zero scroll listeners, esecuzione off-main-thread, e codice molto più leggibile.
// scroll-to-top.js — versione vanilla ES2025
(function () {
'use strict';
const btn = document.getElementById('scroll-top-btn');
if (!btn) return;
// Sentinel: un elemento invisibile in cima alla pagina
const sentinel = document.createElement('div');
sentinel.setAttribute('aria-hidden', 'true');
sentinel.style.cssText = 'position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;';
document.body.prepend(sentinel);
// Observer: mostra il pulsante quando il sentinel esce dalla viewport
const observer = new IntersectionObserver(
([entry]) => {
// Se il sentinel non e' visibile, siamo scrollati in giu'
btn.hidden = entry.isIntersecting;
},
{ threshold: 0 }
);
observer.observe(sentinel);
// Click: scroll fluido in cima
btn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
// Sposta il focus sull'elemento piu' sensato (es. primo heading o main)
const target =
document.querySelector('main h1, main') ??
document.body;
target.setAttribute('tabindex', '-1');
target.focus({ preventScroll: true });
});
})();Il sentinel pattern è la svolta: invece di calcolare window.scrollY ad ogni evento scroll, osserviamo un elemento fisso in cima. Quando questo elemento esce dal viewport, mostriamo il pulsante. Nessun throttle da gestire, nessuna race condition. Se sei curioso di approfondire IntersectionObserver per altri use case come lazy load e animazioni, trovi una spiegazione dettagliata nell’articolo su come usare Intersection Observer per animazioni e lazy load.
La versione 2026: Web Component nativo
La grande aggiunta di questa guida è la versione Web Component. Il vantaggio? Copi un singolo file JS, aggiungi <scroll-top-button></scroll-top-button> nell’HTML, e funziona — in qualsiasi framework o progetto vanilla, senza configurazione. Lo stile è incapsulato nel Shadow DOM, quindi non interferisce con il CSS del progetto.
// scroll-top-button.js — Web Component completo
class ScrollTopButton extends HTMLElement {
#sentinel = null;
#observer = null;
#btn = null;
// Attributi osservabili
static get observedAttributes() {
return ['threshold', 'label', 'color'];
}
connectedCallback() {
// Attach shadow DOM
const shadow = this.attachShadow({ mode: 'open' });
// Stili incapsulati
const style = document.createElement('style');
style.textContent = `
:host { display: contents; }
button {
--_bg: ${this.getAttribute('color') || '#06b6d4'};
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 9999;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
cursor: pointer;
background: var(--_bg);
color: #fff;
box-shadow: 0 4px 14px color-mix(in srgb, var(--_bg) 50%, transparent);
display: grid;
place-items: center;
transition: opacity .25s ease, transform .25s ease;
@starting-style {
opacity: 0;
transform: translateY(12px) scale(0.8);
}
}
button[hidden] { display: none; }
button:hover {
filter: brightness(0.9);
transform: translateY(-2px);
}
button:focus-visible {
outline: 3px solid var(--_bg);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
button { transition: opacity .1s linear; }
}
`;
// Markup del pulsante
const label = this.getAttribute('label') || 'Torna in cima alla pagina';
this.#btn = document.createElement('button');
this.#btn.setAttribute('aria-label', label);
this.#btn.setAttribute('title', label);
this.#btn.setAttribute('hidden', '');
this.#btn.innerHTML = `
<svg aria-hidden="true" focusable="false"
width="20" height="20" viewBox="0 0 24 24"
fill="none" stroke="currentColor"
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
`;
shadow.appendChild(style);
shadow.appendChild(this.#btn);
this.#setupObserver();
this.#btn.addEventListener('click', this.#handleClick.bind(this));
}
#setupObserver() {
// Rimuovi observer precedente se esiste
this.#observer?.disconnect();
this.#sentinel?.remove();
this.#sentinel = document.createElement('div');
this.#sentinel.setAttribute('aria-hidden', 'true');
this.#sentinel.style.cssText =
'position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;';
document.body.prepend(this.#sentinel);
this.#observer = new IntersectionObserver(
([entry]) => {
if (this.#btn) this.#btn.hidden = entry.isIntersecting;
},
{ threshold: 0 }
);
this.#observer.observe(this.#sentinel);
}
#handleClick() {
window.scrollTo({ top: 0, behavior: 'smooth' });
const target =
document.querySelector('main h1, main') ?? document.body;
target.setAttribute('tabindex', '-1');
target.focus({ preventScroll: true });
}
disconnectedCallback() {
this.#observer?.disconnect();
this.#sentinel?.remove();
}
attributeChangedCallback(name, _old, newVal) {
if (!this.#btn) return;
if (name === 'label') {
this.#btn.setAttribute('aria-label', newVal);
this.#btn.setAttribute('title', newVal);
}
}
}
customElements.define('scroll-top-button', ScrollTopButton);L’uso nei tuoi progetti diventa banale:
<!-- Utilizzo base -->
<script type="module" src="/js/scroll-top-button.js"></script>
<scroll-top-button></scroll-top-button>
<!-- Con attributi personalizzati -->
<scroll-top-button
color="#8b5cf6"
label="Back to top"
></scroll-top-button>Per chi lavora su stack moderni come Next.js o Astro, i Web Component funzionano nativamente senza wrapper. Il pattern di incapsulamento con Shadow DOM è lo stesso che trovi in librerie come Lit, ma qui senza dipendenze. Parlando di componenti riutilizzabili e architetture moderne, vale la pena dare un’occhiata anche a tecniche avanzate di sfruttamento dei Web Components per capire come portare questo pattern ancora più lontano.
Accessibilità e focus management
Un pulsante scroll-to-top che non gestisce correttamente il focus è un problema reale per gli utenti di screen reader e tastiera. Quando l’utente clicca il pulsante, torna in cima alla pagina — ma dove va il focus? Se non lo gestiamo esplicitamente, rimane sul pulsante (che potrebbe ora essere nascosto), o peggio si perde. Ci sono tre regole da seguire.
- Sposta il focus su un elemento logico in cima alla pagina (tipicamente
main h1omain). Usatabindex="-1"temporaneamente se l’elemento non è normalmente focalizzabile. - Usa
aria-labeldescrittivo sul<button>. “Torna in cima alla pagina” è meglio di “Su” perché è più esplicito per chi non vede il contesto visivo. - Gestisci
prefers-reduced-motion: riduci o elimina l’animazione di scroll e l’animazione di entrata/uscita del pulsante. Chi soffre di sensibilità al movimento ringrazia.
Per tutto ciò che riguarda l’accessibilità frontend — ARIA, focus, keyboard navigation — il punto di riferimento è la guida completa sull’accessibilità web per developer: un’ottima lettura complementare a questa.
Progressbar di scroll come bonus
Una variante popolare del pulsante scroll-to-top è affiancargli una barra di progressione di lettura che mostra quanto della pagina è stato letto. Con CSS moderno e pochissimo JavaScript, si ottiene un effetto molto professionale.
/* Progress bar di lettura — solo CSS con @property e timeline */
@property --scroll-pct {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
/* Approccio moderno: animation-timeline scroll() */
@supports (animation-timeline: scroll()) {
.reading-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, #06b6d4 var(--scroll-pct, 0%), transparent 0%);
z-index: 10000;
pointer-events: none;
animation: update-progress linear;
animation-timeline: scroll(root block);
}
@keyframes update-progress {
from { --scroll-pct: 0%; }
to { --scroll-pct: 100%; }
}
}
/* Fallback JavaScript per browser senza animation-timeline */
@supports not (animation-timeline: scroll()) {
.reading-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: #06b6d4;
z-index: 10000;
pointer-events: none;
/* width gestita via JS */
}
}Per i browser che non supportano ancora animation-timeline: scroll(), bastano poche righe di JavaScript che aggiornano la width della progress bar in modo passivo (con passive: true sul listener) per non bloccare il main thread. Questo è lo stesso pattern descritto in dettaglio nell’articolo su animazioni legate allo scroll con view-timeline e animation-timeline.
FAQ e Domande Frequenti
Devo usare JavaScript per il pulsante scroll-to-top?
Tecnicamente no: potresti usare un link <a href="#top"> con CSS puro. Ma questa soluzione ha limitazioni importanti: nessun controllo sulla visibilità del pulsante in base alla posizione di scroll, nessuna gestione del focus, e il browser non garantisce sempre lo scroll fluido. Per qualsiasi implementazione professionale, un minimo di JavaScript è necessario — ma come hai visto, bastano meno di 30 righe con l’approccio IntersectionObserver.
Perché IntersectionObserver invece di un scroll event listener?
I listener scroll girano sul main thread e vengono chiamati decine di volte al secondo durante lo scroll. Senza un debounce o throttle manuale, possono causare jank. IntersectionObserver invece è nativo del browser, ottimizzato internamente, e viene invocato solo quando lo stato di visibilità cambia — non ad ogni pixel di scroll. Il risultato è un codice più semplice, più efficiente, e più facile da mantenere. Il browser si occupa di tutta la logica di throttling.
Il Web Component funziona con React, Vue o Next.js?
Sì, con qualche piccola attenzione. I Web Component sono standard del browser e funzionano in qualsiasi contesto. In React devi assicurarti di importare il file JS prima che il componente venga montato (un semplice import nel file principale va bene). In Next.js con App Router, usa un Client Component wrapper che importa lo script. In Vue e Svelte funziona out of the box. L’unica limitazione è che i framework con SSR (server-side rendering) potrebbero avere difficoltà con customElements.define durante l’hydration — gestibile con un check typeof window !== 'undefined'.
Come posso far apparire il pulsante dopo una specifica distanza di scroll?
Con il sentinel pattern, il pulsante appare quando il sentinel (posizionato in cima alla pagina) esce dal viewport. Per farlo apparire dopo una soglia specifica, sposta il sentinel verso il basso: invece di document.body.prepend(sentinel), usa sentinel.style.top = '500px' e posizionalo in modo assoluto. In alternativa, passa un rootMargin negativo all’IntersectionObserver. Ad esempio { rootMargin: '-300px 0px 0px 0px' } farà scattare l’observer solo dopo 300px di scroll verso il basso. Il Web Component espone l’attributo threshold proprio per questo.
Conclusione
Il pulsante scroll-to-top è un microcosmo del frontend moderno: sembra semplice, ma farlo bene richiede di conoscere IntersectionObserver, CSS moderno con @starting-style, accessibilità e focus management. Il salto alla versione Web Component porta tutto questo in un componente incapsulato, riutilizzabile e senza dipendenze — esattamente ciò di cui un developer moderno ha bisogno.
La progressione naturale è questa: parti dalla versione vanilla se stai aggiornando un progetto esistente, adotta il Web Component per i nuovi progetti, e considera la progress bar di lettura per i blog o i siti con contenuti lunghi. Tutti e tre gli approcci condividono la stessa base di CSS moderno e IntersectionObserver, così la curva di apprendimento è minima.
Suggerimenti e Risorse
🔧 Tool: Per testare l’accessibilità del tuo pulsante, usa axe DevTools (estensione Chrome/Firefox) e verifica che il contrasto dell’icona superi 4.5:1. Il colore
#06b6d4su sfondo bianco è borderline: usa sempre uno sfondo scuro oppure aumenta la saturazione.
💡 Pro tip: Sfrutta la nuova pseudo-classe
:popover-opene l’attributopopoverper gestire tooltip informativi sul pulsante senza JavaScript extra. La Popover API è ora supportata in tutti i browser moderni ed è perfetta per micro-interazioni come questa.
🎯 Best practice: Evita di mostrare il pulsante scroll-to-top su pagine corte o su mobile dove il contenuto è sotto i 1.5 viewport di altezza. Aggiungi questa logica nel
connectedCallbackdel Web Component:if (document.body.scrollHeight < window.innerHeight * 1.5) return;per non mostrare un controllo inutile.
