Comunidad de diseño web y desarrollo en internet

Anima los saltos de ancla en HTML con jQuery

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 :D
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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate