Pagine

lunedì 13 luglio 2015

JQUERY - Gestione Freccia laterale Top Page

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