Añadir efectos de desplazamiento vertical en la misma página

Cómo animar enlaces internos con jQuery (con y sin WordPress)

Al utilizar enlaces internos con anclas en HTML, podemos añadir algunos efectos para que, en vez de saltar directamente, el navegador se deslice suavemente hasta el destino en la misma página utilizando una animación. No solo es más agradable, sinó que ayuda a entender al usuario que en vez de cambiar de página, le hemos llevado a un punto interno.

Este efecto se puede conseguir muy fácilmente añadiendo algo de Javascript al proceso. jQuery, la librería más utilizada actualmente para conseguir estas animaciones, nos permite añadir este tipo de efectos fácilmente y con muy poco código. Además, al tratarse de Javascript, funcionará sin problema en cualquier navegador, tanto Firefox, Google Chrome, Safari como Internet Explorer y sus versiones antiguas.

En el siguiente ejemplo se puede ver lo que queremos conseguir: al pulsar sobre los links del menú principal (las letras: A, B, C…) todo el contenido se desplaza suavemente hasta el destino, y al pulsar sobre el botón «Subir», volvemos arriba utilizando el mismo efecto de scroll vertical animado:

Demo: http://jsfiddle.net/fD8zJ/5/

1. Marcamos los enlaces y destinos

Antes de añadir efectos es importante preparar los enlaces para que funcionen sin necesidad de Javascript. Esto ya lo vimos al hablar de los enlaces anclados.

Cada botón o enlace tiene que apuntar a un destino interno añadiendo el símbolo de la almohadilla o numeral (#) delante del nombre del identificador. Después, en el destino de ese enlace tenemos que añadir el atributo «name» o «id». En el ejemplo anterior: <h2 id="a">A</h2>

Una vez hecho esto deberíamos probar los enlaces, para asegurarnos de que funcionan normalmente, sin ningún tipo de animación.

2. Cargamos jQuery

Después, el siguiente paso será ver si tenemos la librería de jQuery cargada, para poder trabajar con sus funciones y animaciones. Si no es así, lo primero que habrá que hacer es añadir jQuery al final de la página (antes del cierre de <body>), o bien en la cabecera (<head>), según lo que convenga en cada caso (WordPress, por ejemplo, añade jQuery en la cabecera).

A ser posible, conviene que enlacemos estos scripts al final de la página, ya que las etiquetas <script> detienen el renderizado de la página hasta que el código se ha cargado completamente. En otras palabras, cuando alguien visita nuestra web, todo el proceso de montaje de la página (HTML, CSS, Javascript) se para hasta que se han descargado las hojas de Javascript que hayamos incluido.

Una solución rápida puede ser añadir la librería de jQuery comprimida alojada directamente en los CDNs de Google:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

O, si por alguna razón preferimos no utilizar servicios de Google, podemos cargar las librerías alojadas en cdnjs.com:

//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js

jQuery en WordPress

Si la web está montada sobre WordPress, el paso anterior puede que no sea necesario, ya que este gestor de contenidos incorpora una copia de jQuery entre sus archivos, aunque por defecto WordPress no lo carga automáticamente, así que tendremos que activarlo de manera manual.

Lo mejor de todas formas, para no equivocarnos, es mirar directamente el código de la página y ver si jQuery ya está presente (lo más probable, ya que muchos plugins y temas lo utilizan). Si no es así, podemos cargarlo añadiendo esta función en el archivo functions.php del tema que tengamos activo:

function mitema_scripts() {
	// Cargamos la copia de Jquery incluida con WordPress
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'mitema_scripts' );

3. Añadimos los efectos con jQuery

Ahora que ya tenemos todo lo necesario, es hora de empezar a añadir el comportamiento y las animaciones con jQuery:

<script>
jQuery(document).ready(function(){
    $('h2').append('<a href="#top" class="gototop">Subir</a>');
    linkInterno = $('a[href^="#"]');
    linkInterno.on('click',function(e) {
	e.preventDefault();
	var href = $(this).attr('href');
	$('html, body').animate({ scrollTop : $( href ).offset().top }, 'slow');
	});
});
</script>
  • Linea 2: añadimos nuestras instrucciones una vez finalizada la carga de la página, cuando el DOM (Document Object Model) está listo. Si estamos utilizando WordPress, en vez de utilizar el símbolo de jQuery (el dolar) tendremos que utilizar la palabra «jQuery» y (opcionalmente) pasar el símbolo dentro de la función, así: jQuery(document).ready(function($)… Esto se debe a que WordPress utiliza un modo especial para evitar conflictos llamado No-Conflict. Si ves que el código no funciona y te aparece el error «TypeError: $ is not a function«, el problema se soluciona haciendo el cambio comentado en esta linea.
  • Linea 3: Añadimos al lado de cada título (h2) un botón para volver arriba, que también utilizará el desplazamiento suave vertical.
  • Linea 4: Aquí tendremos que especificar qué enlaces queremos animar. En el ejemplo hemos guardado en la variable «linkInterno» todos los links que empiecen con el símbolo de la almohadilla (#, es decir, enlaces internos), para que no haya conflictos con otros links que pueda haber en la misma página.
  • Linea 5: Añadimos el evento click() a los enlaces seleccionados en la linea anterior. Cada vez que uno de los links especificados reciba un click de ratón se activará esta función.
  • Linea 6: Anulamos el comportamiento por defecto del enlace con preventDefault(), evitando así que el símbolo de la almohadilla junto con el nombre del ancla aparezcan en la URL al pulsar sobre él.
  • Linea 7: Guardamos en otra variable el contenido del atributo «href» de cada uno de los enlaces, para hacerlo más dinámico y no tener que especificar cada uno por separado.
  • Linea 8: Añadimos la función «animate» de jQuery a las etiquetas HTML y BODY (para que funcione en todos los navegadores). Si queremos ir un paso más allá, podemos cachear esta consulta en una variable para que no se ejecute cada vez que pulsamos un enlace. Después, definimos las opciones de velocidad, en milisegundos o con palabras clave: slow (lento, 600 ms) o fast (rápido, 200 ms).

Entrada relacionada: Mostrar y ocultar elementos de una web con jQuery Toogle. Ejemplos prácticos

4. Mejorando las animaciones con efectos de suavizado

Para mejorar la animación de los enlaces podemos añadir otros efectos de suavizado, impulso y frenado (easing) para que el desplazamiento sea más natural, en lugar de lineal. Esto dará un mejor aspecto al efecto final de desplazamiento vertical, aunque es totalmente opcional.

Para ello podemos añadir el plugin jQuery Easing de varias maneras:

1. Directamente en la cabecera o pie de página (siempre después de jQuery):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

2. O bien, si estamos trabajando con WordPress, adjuntando el código en la misma función que hemos creado anteriormente con «wp_enqueue_script«:

function mitema_scripts() {
	// Cargamos la copia de Jquery incluida con WordPress
	wp_enqueue_script( 'jquery' );

	// Cargamos el plugin de animaciones de jQuery Easing en el footer
	wp_enqueue_script( 'jq-easing', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'mitema_scripts' );

Ahora, para poder aprovechar las nuevas animaciones, tenemos que añadir el nombre del efecto que queramos utilizar después de la velocidad. Así:

<script>
$(document).ready(function(){
    $('h2').append('<a href="#top" class="gototop">Subir</a>');
    linkInterno = $('a[href^="#"]');
    linkInterno.on('click',function(e) {
	e.preventDefault();
	var href = $(this).attr('href');
	$('html, body').animate({ scrollTop : $( href ).offset().top }, 'slow', 'easeInOutExpo');
	});
});
</script>

La única diferencia con la versión anterior de este código es que ahora le hemos añadido el efecto «easeInOutExpo» (en la linea 8) después de la velocidad (slow).

Este plugin de suavizado nos permite utilizar bastantes variaciones, según el tipo de animación que estemos buscando (suavizado inicial, final, impulsos, retrocesos, etc.): easeInOutQuad, easeInOutCubic, easeInOutSine, easeInOutBack, easeInOutBounce…

Demo: http://jsfiddle.net/fD8zJ/5/

Demasiado complicado, necesito un plugin

Para los que necesitan una solución rápida y fácil de integrar, además de tutoriales existen bastantes plugins que ayudan a añadir animaciones de desplazamiento a los enlaces internos. Por ejemplo:

Comentarios

Responder a Anna Cancelar la respuesta

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.