Come creare un semplice e “leggero” pulsante “Go ToTop” (come quello presente in basso a destra qui nella community)

Come creare un semplice e “leggero” pulsante “Go ToTop” (come quello presente in basso a destra qui nella community)

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.




Lascia un commento