Skip to main content

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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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 xlink:href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-up"></use></svg>
  </a>
</div>

Questo sito utilizza cookie tecnici, analytics e di terze parti.
Proseguendo nella navigazione accetti l’utilizzo dei cookie.

Privacy policy