Skip to main content

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA

Torna su

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.

Breaking feature dalla versione 2.12.0

  • Rimossi gli attributi tabindex="-1" e aria-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.

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="/bootstrap-italia/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="/bootstrap-italia/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="/bootstrap-italia/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="/bootstrap-italia/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="/bootstrap-italia/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="/bootstrap-italia/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="/bootstrap-italia/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="/bootstrap-italia/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="/bootstrap-italia/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)