[TUT]Buton de Scroll to Top cu jQuery

[×X×_vasya_×X×]

Dacă o pagină are multă informație afișată, este o idee bună să se pună la dispoziția utilizatorilor o modalitate rapidă de derulare către începutul paginii. În acest tutorial, vom crea un buton de “Scroll to Top” cu ajutorul jQuery, CSS si HTML.

Vom crea un buton cu poziția fixă în partea de jos dreapta a paginii. Vom face butonul vizibil doar dacă pagina este derulată.
Prima dată creăm butonul cu ajutorul unui link.

Code: [Select]

<a href="#" class="scrolltotop">Deruleaza pagina sus</a> 
Adăugăm și CSS-ul aferent:

Code: [Select]

.scrolltotop {
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background: url('imagine.png') no-repeat;
}
După cum vedeți, am definit o poziție fixă pentru buton și text-indent pentru a ascunde textul. display: none; face buton invizibil inițial.
Pentru a face buton vizibil cand se derulează pagina, folosim un event jQuery:

Code: [Select]

$(window).scroll(function(){
   if ($(this).scrollTop() > 100) {
      $('.scrolltotop').fadeIn();
   } else {
      $('.scrolltotop').fadeOut();
   }
});
Următorul pas este să derulăm pagina către top atunci când se face click pe buton.

Code: [Select]

$('.scrolltotop').click(function(){
   $("html, body").animate({ scrollTop: 0 }, 600);
   return false;
});
scrollTop: 0 derulează pagina la pozitia 0px, iar 600 reprezintă durația animației în milisecunde.
Codul jQuery complet:

Code: [Select]

<script type="text/javascript"> 
   $(document).ready(function(){

   $(window).scroll(function(){
      if ($(this).scrollTop() > 100) {
         $('.scrolltotop').fadeIn();
      } else {
         $('.scrolltotop').fadeOut();
      }
   });

   $('.scrolltotop').click(function(){
      $("html, body").animate({ scrollTop: 0 }, 600);
      return false;
   });

   });
</script> 
Sursa: http://www.ionutdesign.ro/buton-de-scroll-to-top-cu-jquery/

[IstuntmanI]

Mi se par inutile butoanele astea.

[s l a m]

Frumos si folositor