Documentazione obsoleta

Questa documentazione non è più mantenuta, ma è stata ripristinata per chi ne avesse ancora bisogno in vecchi progetti.

La versione più attuale di Bootstrap Italia è la versione 2.x, inizia un nuovo progetto sfruttando il codice sorgente aggiornato.

Torna su

Consente agli utenti di scorrere agevolmente verso la parte superiore della pagina

Per aggiungere un bottone 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-attribute="back-to-top" e con una classe .back-to-top che lo posiziona nella parte inferiore destra nella pagina.

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.

<a href="#" aria-hidden="true" data-attribute="back-to-top" class="back-to-top" id="example">
<svg class="icon icon-light"><use href="/bootstrap-italia/dist/svg/sprite.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.

<a href="#" aria-hidden="true" data-attribute="back-to-top" class="back-to-top">
<svg class="icon icon-light"><use href="/bootstrap-italia/dist/svg/sprite.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.

<a href="#" aria-hidden="true" data-attribute="back-to-top" class="back-to-top back-to-top-small">
<svg class="icon icon-light"><use href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-up"></use></svg>
</a>

Versione con ombra

Aggiungendo la classe .shadow al link si aggiunge un’ombra al pulsante.

<div class="d-flex align-items-center">
  <a href="#" aria-hidden="true" data-attribute="back-to-top" class="back-to-top shadow">
    <svg class="icon icon-light"><use href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-up"></use></svg>
  </a>
  <a href="#" aria-hidden="true" data-attribute="back-to-top" class="back-to-top back-to-top-small shadow">
    <svg class="icon icon-light"><use href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-up"></use></svg>
  </a>
</div>

Versione per sfondo scuro

Aggiungendo la classe .dark al link si ottiente un pulsante utilizzabile su sfondo scuro.

<div class="d-flex align-items-center p-4 neutral-1-bg-a8">
  <a href="#" aria-hidden="true" data-attribute="back-to-top" class="back-to-top dark">
    <svg class="icon icon-secondary"><use href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-up"></use></svg>
  </a>
  <a href="#" aria-hidden="true" data-attribute="back-to-top" class="back-to-top back-to-top-small dark">
    <svg class="icon icon-secondary"><use href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-up"></use></svg>
  </a>
</div>

Ombra su sfondo scuro

Aggiungendo le classi .dark e .shadow al link si ottiente un pulsante con ombra utilizzabile su sfondo scuro.

<div class="d-flex align-items-center p-4 neutral-1-bg-a8">
  <a href="#" aria-hidden="true" data-attribute="back-to-top " class="back-to-top dark shadow">
    <svg class="icon icon-secondary"><use href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-up"></use></svg>
  </a>
  <a href="#" aria-hidden="true" data-attribute="back-to-top" class="back-to-top back-to-top-small dark shadow">
    <svg class="icon icon-secondary"><use href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-up"></use></svg>
  </a>
</div>