Hacer scroll con desplazamiento retardado y suave

Cómo hacer un scroll con desplazamiento retardado y suave en tus marcadores

Tiempo estimado de lectura: 7 minutos

 

Hacer scroll con desplazamiento retardado y suave en nuestros vínculos internos

En este artículo vamos a aprender a crear scroll con desplazamiento retardado y suave para nuestros marcadores. La mayoría de nosotros ha trabajado en mayor o menor medida con marcadores, y te habrás dado cuenta de que el movimiento es demasiado brusco. Hoy veremos cómo podemos hacer que ese movimiento sea más suave y armonioso.

Qué son los marcadores y cuando necesitamos utilizarlos

Los marcadores, también llamados puntos de fijación con nombre, son unos vínculos especiales que nos llevan a ciertas partes de la misma página o sección web.

Podemos ver marcadores en funcionamiento cuando vemos índices en ciertos post o artículos. También en las denominadas páginas web onepage, páginas web con una sola página en la que al hacer clic en cualquier elemento del menú, nos lleva a la sección correspondiente.

Para poder crear este efecto, en primer lugar necesitamos crear el punto de fijación con nombre (el sitio de la web hacia dónde queremos ir) y posteriormente el vínculo que apunta a ese punto de fijación o marcador.

Los puntos de fijación se crean con la sintaxis:

<a name=”nombre_del_marcador”> </a>

También podemos hacerlo mediante identificadores:

id=nombre_del_marcador

Mientras que el vínculo que apunta a ese marcador se crea con esta sintaxis:

<a href=”#nombre_del_marcador”>Texto del enlace</a>

Scroll con desplazamiento retardado y suave
Scroll con desplazamiento retardado y suave

Código para hacer el scroll con desplazamiento retardado y suave

El código que vamos a utilizar para hacer el desplazamiento retardado y suave entre los marcadores es tan simple como este:

html {
scroll-behavior: smooth;
}

Sencillo, ¿verdad?.

Dónde debemos colocar este código para hacer scroll con desplazamiento retardado y suave

Como siempre, necesitamos saber dónde poner este código. En este caso vamos a ponerlo en el Personalizador de código de nuestro WordPress, ya que es una opción que tiene que afectar a toda nuestra página web.

Código para el scroll con desplazamiento retardado y suave
Código para el scroll con desplazamiento retardado y suave

Conclusión

Hay que tener en cuenta que la propiedad scroll-behavior es relativamente nueva y sólo está reconocida en las versiones más actuales de los navegadores Opera y Chrome y en los navegadores para Android. Sin embargo, no estaría soportada por Internet Explorer y Safari, aunque sí funcionaría con Edge.

Esto no significa que en estos navegadores no funcionen los marcadores, lo que ocurrirá es que no llegaremos a ver será ese desplazamiento suave entre el vínculo y el marcador.


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *