27Dic 2011 4 Comments */?>

Scroll con Jquery sin plugins

Categorías: JQuery, Tutoriales - Tags: , ,

Uno de los post más consultados en mi blog es el de jQuery.ScrollTo , que no es ni más ni menos que un plugin para animar la pantalla en lugar de usar los aburridos y anticuados anchors de HTML. Como en dicho en montón de oportunidades no siempre me gusta usar plugin para realizar tareas sencillas.

En el caso de un scroll , si lo que quieren es animar la pantalla para volver a la parte superior de sus sitios webs no hay nada más sencillo para hacer que lo siguiente:

Por ejemplo si en el header a nuestro logo le agregamos la clase .top-page

En el footer podemos colocar un link, una imagen o lo que ustedes quieran como por ejemplo:

1
<a class="top" href="top-page">Click para subir </a>

Por último agregamos el código jQuery encargado de animar nuestro anchor.

1
2
3
4
5
6
7
8
$('document').ready(function(){
$('.top').click(function() {
   var elementClicked = $(this).attr("href");
   var destination = $("."+elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500 );
   return false;
});
});
Ver Ejemplo Online

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus