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.
Per facilitare la visualizzazione delle varie versioni di Back to top disponibili i seguenti esempi saranno visualizzati in linea.
Versione ridotta
Aggiungendo la classe .back-to-top-small
al link si ottiene un pulsante di dimensioni ridotte.
Versione con ombra
Aggiungendo la classe .shadow
al link si aggiunge un’ombra al pulsante.
Versione per sfondo scuro
Aggiungendo la classe .dark
al link si ottiene un pulsante utilizzabile su sfondo scuro.
Ombra su sfondo scuro
Aggiungendo le classi .dark
e .shadow
al link si ottiene un pulsante con ombra utilizzabile su sfondo scuro.
Attivazione tramite codice
Nel caso in cui si desidera che il componente sia inizializzato in maniera automatica
utilizzare l’attributo data-bs-toggle
specifico per la sua inizializzazione.
Nel caso in cui si desidera importare e inizializzare autonomamente il componente
l’attributo data-bs-toggle
specifico non deve essere incluso così da 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.