<div class="rtds-back-to-top rtds-fixed rtds-bottom-12 rtds-right-6 rtds-transition-all rtds-duration-300">
<a href="#" class="rtds-btn
rtds-btn--icon rtds-btn--s lg:rtds-btn--l rtds-btn--outlined rtds-bg-white rtds-shadow-lg hover:rtds-shadow-xl hover:rtds-scale-110 rtds-transition-all rtds-duration-300"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--arrow-up" />
</svg>
<span class="rtds-sr-only">
Torna in cima alla pagina
</span>
</a>
</div>
<div class="rtds-back-to-top rtds-fixed rtds-bottom-12 rtds-right-6 rtds-transition-all rtds-duration-300">
{% render '@button--icon', {
icon: "solid--arrow-up",
classes: 'rtds-btn--s lg:rtds-btn--l rtds-btn--outlined rtds-bg-white rtds-shadow-lg hover:rtds-shadow-xl hover:rtds-scale-110 rtds-transition-all rtds-duration-300',
label: "Torna in cima alla pagina",
href: "#"
}, true %}
</div>
/* No context defined. */
.rtds-back-to-top {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.rtds-back-to-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@layer components {
.rtds-back-to-top {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.rtds-back-to-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
document.addEventListener('DOMContentLoaded', function() {
const backToTop = document.querySelector('.rtds-back-to-top');
if (!backToTop) return;
const link = backToTop.querySelector('a');
const scrollThreshold = 300;
function toggleBackToTop() {
const isDesktop = window.innerWidth >= 1024;
const scrollY = window.scrollY;
if (isDesktop) {
if (scrollY > scrollThreshold) {
backToTop.classList.add('is-visible');
} else {
backToTop.classList.remove('is-visible');
}
} else {
backToTop.classList.add('is-visible');
}
}
link.addEventListener('click', (e) => {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
window.addEventListener('scroll', toggleBackToTop);
window.addEventListener('resize', toggleBackToTop);
toggleBackToTop();
});
Pulsante fisso a schermo che consente all’utente di tornare in cima alla pagina. Si mostra dopo uno scroll di 300px su desktop; è sempre visibile su mobile. Lo scroll è animato (smooth). Il comportamento è gestito da back-to-top-button.js.
Il componente è renderizzato come <div class="rtds-back-to-top"> con posizionamento fisso in basso a destra. Contiene un <a href="#"> (link-pulsante) che attiva lo scroll verso top: 0.
La visibilità è controllata via JS aggiungendo/rimuovendo la classe is-visible sul wrapper:
>= 1024px): visibile solo dopo 300px di scrollContesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context
.config.ymlusati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.
Nessun parametro configurabile: il componente usa una configurazione fissa.
Livello AA — criteri pertinenti:
<a> nativo attivabile con Enter<a href="#"> — ruolo implicito link; attivabile con Enter; l’href="#" viene intercettato da JS per eseguire lo smooth scroll verso la cima della pagina<div class="rtds-back-to-top"> — wrapper di posizionamento; non ha semantica propria| Attributo | Valori | Condizione |
|---|---|---|
aria-hidden |
"true" |
sull’icona SVG interna — elemento decorativo |
| Tasto | Azione |
|---|---|
Tab / Shift+Tab |
Sposta il focus sul/dal pulsante |
Enter |
Attiva lo scroll verso cima pagina (smooth) |
:focus-visible è sempre visibile e non viene rimosso via CSSis-visible assente): considerare l’aggiunta di tabindex="-1" quando nascosto per escluderlo dall’ordine di tabulazione<span class="rtds-sr-only"> contiene il testo “Torna in cima alla pagina” — lo screen reader lo legge come nome del pulsante; l’icona ha aria-hidden="true" e viene ignorataaria-hidden="true" sul wrapper quando la classe is-visible è assente.rtds-back-to-top: wrapper fisso, posizionato bottom-12 right-6, con transizione opacity/visibilitàis-visible lo rende visibile<!-- Esempio base -->
<div class="rtds-back-to-top rtds-fixed rtds-bottom-12 rtds-right-6 rtds-transition-all rtds-duration-300">
<a href="#" class="rtds-btn rtds-btn--s lg:rtds-btn--l rtds-btn--outlined rtds-bg-white rtds-shadow-lg">
<span class="rtds-sr-only">Torna in cima alla pagina</span>
<svg class="rtds-icon" aria-hidden="true" focusable="false">
<use href="#solid--arrow-up"></use>
</svg>
</a>
</div>back-to-top-button.js caricato in paginascroll e resize per aggiornare la visibilità