Haremos un botón "Ir Arriba" con jQuery que lleve a un anchor (Cosas como #top) y mueva el scroll del navegador con una animación en vez de saltar directamente.
jQuery es una librería para JavaScript, la cual es capaz de facilitar notablemente nuestro trabajo sobre JavaScript, pueden descargar la librería jQuery desde www.jQuery.com y leer el tutorial de jQuery básico de Cristalab.
Código para saltar hacia un anchor con animación de scroll en jQuery
Código :
<a href="#" class="goTop">Ir Arriba</a>
<script type="text/javascript">
$('.goTop').click(
function()
{
$('html,body').animate({scrollTop:'0px'}, 500);return false;
}
);
</script>Explicando el código:
Para que este efecto funcione, deberán incluir a la librería jQuery entre "<head>" y "</head>":
Código :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Luego agregar el código del efecto bajo este, entre "<head>" y "</head>":
Código :
<script type="text/javascript">
$('.goTop').click(
function()
{
$('html,body').animate({scrollTop:'0px'}, 500);return false;
}
);
</script>Finalmente a el objeto que queramos usar como "botón ir al cielo" le agregamos la clase "goTop", de esta forma uno o mas botones funcionaran sin problemas.
Código :
<a href="#" class="goTop">Ir Arriba</a>
El efecto jQuery se utiliza asi:
Código :
$( selector ).click( function( ){
$( selector ).animate({ atributos }, velocidad );
} );Espero lo hayan entendido
Saludos!
Por Sisore el 06 de Octubre de 2010
Gracias.
Por elyager el 06 de Octubre de 2010
gracias por el buen tip.
elyager-blog :
Por nestor el 07 de Octubre de 2010
o algo asi.. para verlo en accion..
siempre lo ponian en los tutoriales
Gracias por el dato, me viene perfecto.
Solo agradezcan mi tiempo
Por rakshaka el 22 de Octubre de 2010
Por juancube el 30 de Junio de 2011
Por juancube el 30 de Junio de 2011
Debiese de funcionar entre las etiquetas head?
Por raider33 el 12 de Septiembre de 2011
no veo alguna "animación"