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="/bootstrap-lombardia/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="/bootstrap-lombardia/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="/bootstrap-lombardia/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="/bootstrap-lombardia/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="/bootstrap-lombardia/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="/bootstrap-lombardia/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="/bootstrap-lombardia/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="/bootstrap-lombardia/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="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-up"></use></svg>
  </a>
</div>

Attivazione tramite JavaScript

È possibile creare un’istanza con il constructor, ad esempio:

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)`