Torna su
Consente agli utenti di scorrere agevolmente verso la parte superiore della pagina.
Per aggiungere un pulsante che si abilita automaticamente allo scorrimento della pagina, e che aiuta l’utente a tornare in alto con un solo click su di esso, è sufficiente usare un link con attributo data-bs-toggle="backtotop" e con una classe .back-to-top che lo posiziona nella parte inferiore destra nella pagina.
Le animazioni sono state realizzate con il plugin javascript AnimeJs.
Esempio
Per visualizzare il Back to top nella posizione corretta è necessario scrollare questa pagina. L’esempio del codice sottostante sarà visibile solo a scroll avvenuto.
1
2
3
<a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top" id="example">
<svg class="icon icon-light"><use href="/dist/svg/sprites.svg#it-arrow-up"></use></svg>
</a>
Per facilitare la visualizzazione delle varie versioni di Back to top disponibili i seguenti esempi saranno visualizzati in linea.
1
2
3
<a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top">
<svg class="icon icon-light"><use href="/dist/svg/sprites.svg#it-arrow-up"></use></svg>
</a>
Versione ridotta
Aggiungendo la classe .back-to-top-small al link si ottiene un pulsante di dimensioni ridotte.
1
2
3
<a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top back-to-top-small">
<svg class="icon icon-light"><use href="/dist/svg/sprites.svg#it-arrow-up"></use></svg>
</a>
Versione con ombra
Aggiungendo la classe .shadow al link si aggiunge un’ombra al pulsante.
1
2
3
4
5
6
7
8
<div class="d-flex align-items-center">
<a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top shadow">
<svg class="icon icon-light"><use href="/dist/svg/sprites.svg#it-arrow-up"></use></svg>
</a>
<a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top back-to-top-small shadow">
<svg class="icon icon-light"><use href="/dist/svg/sprites.svg#it-arrow-up"></use></svg>
</a>
</div>
Versione per sfondo scuro
Aggiungendo la classe .dark al link si ottiene un pulsante utilizzabile su sfondo scuro.
1
2
3
4
5
6
7
8
<div class="d-flex align-items-center p-4 neutral-1-bg-a8">
<a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top dark">
<svg class="icon icon-secondary"><use href="/dist/svg/sprites.svg#it-arrow-up"></use></svg>
</a>
<a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top back-to-top-small dark">
<svg class="icon icon-secondary"><use href="/dist/svg/sprites.svg#it-arrow-up"></use></svg>
</a>
</div>
Ombra su sfondo scuro
Aggiungendo le classi .dark e .shadow al link si ottiene un pulsante con ombra utilizzabile su sfondo scuro.
1
2
3
4
5
6
7
8
<div class="d-flex align-items-center p-4 neutral-1-bg-a8">
<a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top dark shadow">
<svg class="icon icon-secondary"><use href="/dist/svg/sprites.svg#it-arrow-up"></use></svg>
</a>
<a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top back-to-top-small dark shadow">
<svg class="icon icon-secondary"><use href="/dist/svg/sprites.svg#it-arrow-up"></use></svg>
</a>
</div>
Attivazione tramite codice
Nel caso in cui si desidera che i componenti siano inizializzati in maniera automatica (salvo casi particolari) utilizzare l’attributo data-bs-toggle specifico per l’inizializzazione automatica del componente.
Nel caso in cui si desidera importare e inizializzare autonomamente i singoli componenti, l’attributo data-bs-toggle specifico non deve essere incluso, per evitare inizializzazioni automatiche che possono portare a comportamenti inaspettati.
Per maggiori informazioni consulta la sezione JavaScript di Bootstrap Italia.
È possibile creare un’istanza con il constructor, ad esempio:
1
2
3
4
import { BackToTop } from 'bootstrap-italia';
const backToTopElement = document.getElementById('#backToTop');
const backToTop = new BackToTop(backToTopElement, options);
Opzioni
Le opzioni possono essere passate tramite gli attributi data o tramite Javascript. Per quanto riguarda gli attributi data, aggiungi il nome dell’opzione a data-bs, come in data-bs-scroll-limit="".
| Nome | Tipo | Predefinito | Descrizione |
|---|---|---|---|
| positionTop | number | 0 | Posizione Y espressa in pixel alla quale ritornarne al click sull'elemento |
| scrollLimit | number | 100 | Posizione Y espressa in pixel alla quale far comparire l'elemento |
| duration | number | 800 | Durata dell'animazione di scroll espressa in millisecondi |
| easing | string | easeInOutSine | Inerzia dell'animazione di scroll. Per i valori fare riferimento alla documentazione di AnimeJs. |
Metodi
| Metodo | Descrizione |
|---|---|
| show | Mostra il pulsante |
| hide | Nasconde nasconde il pulsante |
| scrollToTop | Attiva l'animazione di scroll verso la coordinata Y indicata dall'opzione positionTop |
Breaking change
- Rimossi gli attributi
tabindex="-1"earia-hidden="true"per permettere il focus da tastiera e l’interazione da strumenti assistivi. - Aggiunto attributo
aria-label="Torna su"per comunicare lo scopo a strumenti assistivi.