• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Animación de saltos de enlace en WordPress

Animación de saltos de enlace en WordPress

Animación de saltos de enlace en WordPress

[ 5 enero 2022 ] [ Actualizado: 28 febrero 2022 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

accesibilidad mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

En un artículo anterior habíamos visto cómo crear saltos de enlace en la misma página en WordPress, en este artículo vamos a complementar esa funcionalidad agregando una animación al scroll del navegador cuando se ubica en el enlace.

 

Resultado Final

Al final lo que queremos obtener será algo similar a lo que se muestra en la siguiente animación.

Animación resultado final salto enlace WordPress

 

Opción 1 – Código CSS para la animación del scroll

Luego de que creas el salto de enlace, puedes entonces hacer la animación. La opción más simple es usar directamente código CSS para animar el desplazamiento del scroll.

Puedes agregar el siguiente código en Apariencia > Personalizar > CSS de tu theme.

html {
  scroll-behavior: smooth;
}
Ten en cuenta que scroll-behavior al ser una propiedad relativamente nueva, no funciona en todas las versiones de navegadores, aunque en las versiones actuales si funciona.

 

Opción 2 – Código Javascript para la animación del scroll

La animación del scroll en este caso lo haremos con código javascript, sin embargo para insertarlo usaremos un Hook de WordPress.


add_action('wp_footer', function(){
	?>
	<script>
		document.querySelectorAll('a[href^="#"]').forEach(anchor => {
			anchor.addEventListener('click', function (e) {
				e.preventDefault();

				document.querySelector(this.getAttribute('href')).scrollIntoView({
					behavior: 'smooth'
				});
			});
		});
	</script>
	<?php
});
Puedes agregar este código como parte del archivo functions.php de tu tema hijo o a través de un plugin de snippets.

En el código anterior:

  • Recorremos todos los enlaces de ancla, o que empiezan con el caracter #
  • Para cada uno de los enlaces establecemos el evento click
  • Evitamos el evento por defecto
  • Luego definimos la animación para la url del enlace con la función scrollIntoView()

 

Conclusión

Como has podido comprobar puedes darle un efecto de animación a tus saltos de enlaces o enlaces ancla de manera simple usando directamente código CSS o código javascript en WordPress.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores:

Suscríbete a DecodeCMS:

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Crear un sitio One Page en WordPressCrear un sitio One Page en WordPress
  • Saltos de enlace en WordPressSaltos de enlace en una misma página en WordPress
  • child theme en WordPressCrear un Child Theme en WordPress de manera correcta
  • Carga de Javascript y CSS al footer en WordPressMover la carga de Javascript y CSS al footer en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Jose

    27 febrero, 2022

    Hola, que opinas de la propiedad css scroll-behavior: smooth creo que hace lo mismo y seria el navegador el encargado de crear el movimiento asi apenas hay consumo de recursos, el otro contra seria la compatibilidad.
    Un saludo.

    • Jhon Marreros Guzmán

      28 febrero, 2022

      Hola Jose, si, gracias por la observación, no había usado esa propiedad de CSS, he actualizado el artículo para también incluirla.

      Saludos.

  2. Jose

    28 febrero, 2022

    Lo he probado en la ultima version de safari y si funciona perfectamente, ademas con las actualizaciones casi obligatorias de safari te aseguras compatibilidad, creo que a estas alturas ya se puede decir que es usable en cualquier situacion y mas ligero que js ya que es el navegador el que lo mueve sin depender de ningun script dentro de nuestra web.
    Saludos.

    • Jhon Marreros Guzmán

      28 febrero, 2022

      Hola José, si cierto, yo lo probé en Safarí 14.0.3, y aún no funcionaba. Saludos.

  3. Jose

    1 marzo, 2022

    Todo el contenido que compartís y todo lo que enseñais al final tiene un valor impresionante, sois una web de referencia en cuanto a programación en wordpress y se aprende muchísimo con vosotros hasta el punto de prescindir de muchos plugins, yo he recurrido a vuestro codigo muchas veces y se agradece muchisimo ya que se encuentra de todo.
    Además sois de las pocas webs de programación que tiene un diseño agradable y muy bonito en su blog y eso tambien invita a venir a menudo.
    Un saludo y muchas gracias por todo vuestro trabajo.

    • Jhon Marreros Guzmán

      1 marzo, 2022

      Gracias Jose. Un saludo para ti igualmente.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Gestionar varios sitios web con ManageWP

Qué son los Plugins Dependientes en WordPress

Modificar el orden de productos destacados en StoreFront

Agregar Tabs personalizados en WooCommerce sin plugins

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados