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-hidden="true" tabindex="-1" 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-hidden="true" tabindex="-1" 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-hidden="true" tabindex="-1" 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-hidden="true" tabindex="-1" 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-hidden="true" tabindex="-1" 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-hidden="true" tabindex="-1" 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-hidden="true" tabindex="-1" 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-hidden="true" tabindex="-1" 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-hidden="true" tabindex="-1" 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 JavaScript
È possibile creare un’istanza con il constructor, ad esempio:
1
2
3
4
var backToTopElement = document.getElementById('#backToTop')
var backToTop = new bootstrap.BackToTop(backToTopElement, {
scrollLimit: 100,
})
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](https://animejs.com/documentation/#linearEasing). |
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 |
| dispose | Elimina le funzionalità del componente |
| getInstance | Metodo statico che restituisce l'istanza BackToTop associata ad un elemento del DOM. Esempio: bootstrap.BackToTop.getInstance(element) |
| getOrCreateInstance | Metodo statico che restituisce un'istanza BackToTop associata ad un elemento del DOM o ne crea una nuova nel caso non fosse stata inizializzata. Esempio: bootstrap.BackToTop.getOrCreateInstance(element) |