Este post fue visto: 2615

En este post (actualizado a diciembre de 2020) les quiero comentar sobre el uso del Smooth Scrolling para «recorrer» los links en una misma página o pantalla. En una versión utilizando JQuery y en otra utilizando puramente CSS.

 

▧ Saltó la liebre

Pensemos en un caso práctico: utilizamos un anchor (o ancla) interno entre un ítem y otro. Al hacer click, ¿qué sucede? El efecto es brusco e inmediato. ¡Como el salto de una liebre! Pero, al aplicar el Smooth Scrolling, este efecto se suaviza. Es más agradable visualmente y mejora la experiencia del usuario.

En la web de CSS-Tricks encontré este snippet en JQuery para aplicar el Smooth Scrolling o desplazamiento suave dentro de una misma página. Con él, evitamos ese «salto brusco».

Aquí abajo copio el CodePen. pueden mirar, testear, copiar y pegar:

  • Neolo Servicios de Hosting -- El blog de aleare.design
  • Abre tu cuenta en Payoneer y obtén 25 dólares de regalo!

☞ Autor: Chris Coyier

 

▧ Un poco más allá

Como ya vieron en el ejemplo anterior, este efecto hasta hace un tiempo, podía lograrse sólo utilizando algo de JavaScript o jQuery. Pero actualmente, existe una propiedad específica de CSS llamada scroll-behavior: smooth;

Los valores para esta propiedad, por el momento, son dos:

  1. scroll-behavior: auto; comportamiento tradicional: salto brusco.
  2. scroll-behavior: smooth; desplazamiento suave progresivo.

No existe (al menos al día de esta actualización) otro parámetro para customizar la velocidad de transición: este queda en manos del navegador. Sin embargo, la velocidad que viene por defecto es medianamente aceptable.

Por defecto, esta propiedad no es «heredable», por lo que hay que aplicarla al elemento contenedor del scroll.

El listado de los navegadores que soportan esta propiedad es amplio, y se puede consultar en caniuse.

En esta demo de CodePen que dejo a continuación, se puede ver su funcionamiento:

☞ Autor: Ryan Desouza

¡Pero hay más!

Este otro ejemplo, es mucho más completo, combina scroll:behavior con efecto toggle; todo hecho puramente en CSS: Toggle function & smooth scroll pure HTML & CSS.

Espero que te resulte útil para aplicar a tu código, así que, ¡a codear se ha dicho!

Avatar

Escribió:

Alejandra Arellano

¡Hola Mundo! Soy diseñadora gráfica y web, programadora HTML/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de Aleare Design Estudio Creativo y Comunicación Digital.

Deja una respuesta

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

Cerrar

Sobre mí

¡Bienvenidos a mi blog! Mi nombre es Alejandra y soy diseñadora gráfica y web, también programadora, community manager, redactora e ilustradora.

Fundadora de aleare design estudio de diseño y comunicación digital, desde el 2008 brindando servicios a empresas y agencias digitales en varias ciudades de Argentina y también en México, España, Francia y Noruega.

Mi Filosofía

“Tienen que encontrar eso que aman […]. Su trabajo va a llenar gran parte de sus vidas […] y la única forma de hacer un gran trabajo es amando lo que hacen. Si todavía no lo han encontrado, sigan buscando. No se detengan […]. Sean curiosos. Sean inquietos.”

Steve Jobs
Discurso de apertura, Universidad de Stanford, 2005