Vai al contenuto principale

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.

Esempio

Per facilitare la visualizzazione delle varianti 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-inverse"><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-inverse"><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-inverse"><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-inverse"><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 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

Properties

La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-backtop-background Controls the background color of the button, using color tokens var(--bsi-color-background-primary)
--bsi-backtop-position Controls the distance from the bottom and right edges 1rem
--bsi-backtop-radius Controls the border radius of the button, using radius tokens var(--bsi-radius-circle)
--bsi-backtop-sizing Controls the width and height of the button 2.5rem

Breaking change

  • La classe che controlla il colore delle icone bianche ha cambiato nome: .icon-white diventa .icon-inverse.

  • 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.