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/1.x/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/1.x/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/1.x/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/1.x/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/1.x/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/1.x/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/1.x/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/1.x/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/1.x/dist/svg/sprite.svg#it-arrow-up"></use></svg>
</a>
</div>