In questo articolo analizziamo un sistema di ritorno ad inizio pagina con jQuery che si attiva dinamicamente allo scroll di pagina verso il basso con la comparsa un’icona cliccabile, la quale scomparirà qualora si torni ad inizio pagina.
Purtroppo, trattandosi di un effetto dinamico, lo screenshot non rende l’idea, ma ci fa capire di cosa abbiamo bisogno:
In basso a destra possiamo notare il pulsante di risalita, indicativo del ritorno ad inizio pagina, che resterà fisso nonostante lo scroll e sarà visibile solo all’atto dello scrorrimento della pagina verso il basso.
Procuriamoci (o realizziamo) un’immagine PNG trasparente – in modo che non si sovrapponga male ad eventuali texture di sfondo – e chiamiamola back_to_top.png. Consiglio vivamente di utilizzare un’immagine molto tenue e poco invasiva per non disturbare la navigazione dell’utente (trattandosi per altro di una piccola utility e non di un’importante applicazione utile chissà a quale scopo).
Passiamo al codice, iniziando dall’HTML:
<html>
<head>
<title>"Torna a inizio pagina" dinamico con jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css"><![endif]-->
</head>
<body>
<h1>"Torna a inizio pagina" dinamico con jQuery</h1>
<p>Prova a scrollare la pagina verso il basso, poi verso l'alto...</p>
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>
<div id="back_to_top"><img src="back_to_top.png"></div>
</body>
</html>Nell’intestazione della pagina richiamiamo la libreria jQuery, i nostri file esterni Javascript e CSS, nonchè un foglio di stile dedicato ad Explorer per gestire l’elemento fisso, ossia l’icona di ritorno ad inizio pagina.
Nel corpo ci limitiamo a forzare con dei ritorni a capo fittizi l’altezza della pagina, quindi alla fine del codice, prima di chiudere il </body>, inseriamo un <div> a cui assegniamo l’identificativo back_to_top che useremo sia via CSS che via jQuery.
Passiamo al foglio di stile, contenuto nel file style.css, di cui segue il codice:
/*
Alcune stilizzazioni generiche per la pagina
*/
body { background: #EEEEEE; margin: 10px; }
h1, p { color: #000000; margin: 0px 0px 10px 0px: }
h1 { font: bold 15px tahoma; }
p { font: normal 13px tahoma; }
/*
Stilizzo il pulsante di risalita
*/
#back_to_top {
position: fixed;
bottom: 15px;
right: 15px;
cursor: pointer;
}Le prime righe di codice gestiscono in modo generico gli elementi di base della pagina, mentre la seconda parte fissa l’icona in basso a destra (in modo molto semplice per i browser che supportano i CSS3) mediante la proprietà position settata su fixed.
Per completare il discorso dei fogli di stile, passiamo alla versione per Explorer per bloccare l’icona il cui codice è contenuto nel file ie.css.
/*
Le vecchie versioni di Explorer hanno bisogno di un po' di codice a parte
*/
#back_to_top
{
position: absolute;
top: expression(((0-(back_to_top.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) - 15) + "px");
right: 15px;
}Concludiamo col codice Javascript, contenuto nel file script.js di cui segue il codice corredato da opportuni commenti:
// attivo il codice al document ready
$(document).ready(function()
{
// creo una variabile con il riferimento al nostro bottone
var $btt = $("#back_to_top");
// nascono il bottone al caricamento della pagina
$btt.hide();
// intercetto lo scroll di pagina
$(window).scroll(function()
{
// se lo scroll supera i 300 pixel dal margine superiore mostro il bottone (se nascosto)
if ($("body").scrollTop() > 300) {
if ($btt.is(":hidden")) $btt.show();
// in caso contrario lo nascondo (se visibile)
}else{
if ($btt.is(":visible")) $btt.hide();
}
});
// gestisco il click sul bottone
$btt.click(function()
{
// torno ad inizio pagina con movenza fluida
$("html,body").animate({scrollTop: 0}, 500, function(){});
});
});Clicca qui per vedere l’effetto.
