Oggi vi parlerò di come ho ottenuto questa funzionalità in questa community, e – nel modo più semplice possibile – vi aiuterò a riprodurla.
Creai anche un plugin per wordpress: https://wordpress.org/plugins/smooth-page-scroll-to-top/
ma non lo aggiorno da un po’ (mi riprometto di farlo quanto prima – quello lavora con immagini e non è ottimizzato come questo che sto per proporvi).
Il codice si divide in due parti:
1) Javascript (da copia incollare nel footer della pagina, appena prima del </body>-):
<script type="text/javascript">
jQuery(document).ready(function($)
{
$(window).scroll(function()
{
if ($(this).scrollTop() > 100)
{
$('.scrollup').fadeIn();
}
else
{
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function()
{
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
<!-- Smooth Scroll --><a href="#" class="scrollup">▲</a><!-- Smooth Scroll -->
2) Css (da inserire nel css del vostro template, o direttamente nell’header della pagina all’interno del tag <style>*codice*</style>-):
/* Scroll ToTop */
.scrollup, .scrollup:hover {
color: #fff;
}
.scrollup {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
width: 40px;
line-height: 40px;
text-align: center;
position: fixed;
right: 25px;
bottom: 20px;
display: none;
z-index: 10000;
}
Tutto qua!
Ma è necessario avere jquery attivo (ormai di default su molti cms come wordpress, ipb, e tanti altri). Eventualmente bisogna aggiungere questo nell’header della vostra pagina (tra <head> e </head>-):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Ok! Adesso avete il vostro nuovo pulsante “Go ToTop” (o “Go To”, o “To Top” … Tanti nomi, ma serve sempre a riportarti su, ecco) 🙂
In caso di dubbi, domande o difficoltà (esempio se usate un cms), non esitate a chiedere.