Può essere utile creare una freccia a destra che consenta di ritornare
al top della pagina quando si scorre la stessa per osservare, per
esempio, degli articoli in una lista.
Un esempio pratico lo si trova su ebay che, ultimamente, ha
implementato questa funzionalità. Con Jquery è molto semplice gestire
l'oggetto predisposto allo scopo.
Iniziamo dallo style che deve avere il nostro oggetto:
[code]
<style type="text/css">
#up{
width:32px;
height:32px;
position:fixed;
bottom:200px;
right:10px;
z-index:2;
background-color:#000;
display:none;
background:url(img/arrowup.jpg); /*l’immagine è messa come sfondo*/
background-position:center;
opacity:0.2;
}
</style>
[/code]
dopodiché gestiamo la visualizzazione dello stesso attraverso javascript:
[code]
<script src="Scripts/jquery-2.0.3.js"></script><!-- importazione libreria jquery-->
<script type="text/javascript">
$(document).ready( function(){
$(window).scroll(function(){
if($(window).scrollTop() >50 )
$('#up').show();
else
$('#up').hide(200);
});
$('#up').click(function(){
$('#up').hide(200, function(){
$(window).scrollTop(0);
});
});
});
\\Gestione del click sull'immagine
$('#up').click(function(){
$('#up').hide(200, function () {
$(window).scrollTop(0);
});
});
</script>
[/code]
infine il body contenente il nostro oggetto UP:
[code]
<body>
<form id="form1" runat="server">
<div style="background-color: beige; height: 2000px;">
</div>
</form>
<div id="up">
</div>
</body>
[/code]
Il risultato è un div in posizione fissa con un'immagine, tipicamente
una freccia, e cliccando su di essa si torna al Top della pagina.
Nessun commento:
Posta un commento