Animación de scroll fluída en JavaScript con smoothScroll

Hace poco trabajé en un sitio en el que evité a toda costa incluir archivos JavaScript como bootstrap.js o jQuery. Lo poco que había que hacer con JS lo hice a mano. Creo que la ventaja más grande de jQuery es poder hacer:

$('.selector').click(function(){
  alert("Hiciste clic!");
});

Pero a menos que seamos muy vagos (característica común -y no necesariamente negativa- en programadores), podemos hacer lo mismo con JavaScript “pelado”. Algunas funciones que nos pueden ayudar a elegir un selector (por clase, id, e incluso búsquedas) son: getElementById, getElementsByName y querySelectorAll, entre otras.
Y para agregarles funciones en distintos eventos, basta con ver cómo funciona addEventListener.

Hay muchas opciones para reemplazar funcionalidades que nos brinda jQuery (a costo de incluir más de 200kb de carga a una página) y algunas las podemos encontrar en el sitio You Might Not Need jQuery.

Volviendo al proyecto en cuestión, un requerimiento era enlazar a distintas partes de una misma página y que hubiera una animación. En un principio usaba enlaces con “#” como para ir a una sección o título con cierto id. Pero me puse a buscar una forma de implementar una animación fluída sin tener que incluir jQuery. Ni siquiera sé si jQuery implementa una animación, tengo idea de que sí, pero en fin…

En un principio me encontré con montón de plugins de jQuery . Seguí viendo muchas bibliotecas JavaScript que proveían varios tipos de animaciones con CSS3 y JS. Pensé que iba a tener que sufrir el trabajo de implementarlo por mi cuenta, aunque me negaba a creer que algo tan sencillo no hubiera sido implementado ya. Quienes me conocen saben que no soy gran admirador de JavaScript…

Finalmente llegó a mi rescate:

smoothScroll

Un script pequeñísimo, compatible con los estándares, que provee el efecto de desplazamiento suave, es fácil de usar y no tiene dependencias. Funciona en Firefox, Chrome, IE10, Opera y Safari. El script ata los enlaces internos a un manejador y produce el desplazamiento deseado en vez de un salto instantáneo como hacen en general los navegadores sin ningún efecto. También podemos llamarlo a mano desde nuestro código. Por ejemplo:

  smoothScroll(document.getElementById('contact'));

La función smoothScroll recibe el elemento (HTMLElement) al que queremos enlazar como parámetro. Otros tres parámetros opcionales son:

• duration – duración de la animación, por defecto 500ms.
• callback – una función a ejecutar cuando termina la animación de scroll
• context – contexto del scrolling, por defecto window, pero puede ser cualquier objeto HTMLElement

El código está disponible en GitHub bajo licencia MIT. El código minificado ocupa apenas 1.4Kb, así que vale la pena usarlo. Me vino bastante al pelo así que seguramente lo vuelva a usar en algún momento.