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!
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
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"
Por Cristhian el 09 de Agosto de 2013
Por Federico el 26 de Septiembre de 2013
Por Hernan el 21 de Mayo de 2014
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
y también un marcador:
<a id="punto"></a>
En otra página por ejemplo nosotros.php hay un link que me manda al marcador punto de la página scroll.php.
En chrome todo funciona bien pero en firefox no manda al marcador PUNTO.
He notado que si quito el código <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script> el marcador funciona pero la animación del scroll ya no funciona. Deseo que ambos funcionen bien en FIREFOX. Repito que el problema sólo aparece en firefox.
¿Cuál sería la solución?
Pueden aydarme por favor.
Gracas.
Por tigger el 21 de Diciembre de 2014
Para los que no les funciona, recuerden que deben insertar el codigo de esta forma:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$('.goTop').click(
function()
{
$('html,body').animate({scrollTop:'0px'}, 500);return false;
}
);
</script>
</head>
<body>
<a href="#" class="goTop">Ir Arriba</a>
<script type="text/javascript">
$('.goTop').click(
function()
{
$('html,body').animate({scrollTop:'0px'}, 500);return false;
}
);
</script>
</body>
Por Paul el 28 de Septiembre de 2015