Scroll automático
Si has terminado de crear la página habrás visto que al pulsar cualquier enlace interno (de la barr de menu o de los botones) la página realiza un scroll suave hasta llegar al lugar apuntado por el enlace.
Esto se logra con otro script asociado a un evento scroll del objeto window, que es el que se encarga de todo lo relativo a la ventana de visualización de la pagína.
Existen inumerables librerías que permiten incorporar este efecto a cualqueir pa´gians web, muchas de ellas dependientes de jQuery. Pero verás lo sencillo que es y no vas a necesitar dependencias externas ni cientos de lineas de código.
Código script para scroll automático
Si has seguido la aplicación del menu responsive ya sabes como asociar una función a un evento en HTML y como funciona el esquema de eventos. Si no lo has visto te aconsejo que lo hagas: es muy simple y puede aclararte bastantes las ideas.
Ahora vamos a usar un mátodo más práctico de asociación de los eventos con su controlador. Además como son muchos los enlaces a los que hay que asociar el mismo evento, nos vamos a ahorrar escribir bastante código (aunque se acon el copia y pega).
Este sistema es el que vas a ver en la inmensa mayoría de apllciaciones javascript para páginas web. Se trata de asignas un controlador a cada evento mediante código. Mira lo simple e intuitivo que es:
//Busco todos los enlaces
var lnks = Array.from(document.getElementsByTagName('a'));
//si es enlace interno le asocio el controlador al evento click
lnks.forEach(function (v) {
if (/#[a-z,0-9]+/.test(v.hash))
v.addEventListener("click", animScroll, false)
})¿Ves? El método addEventListener(nombreEvento, función, true/false). Fíjate que lo que en HTML es onClick ahora es "click", esto es para todos los eventos, al usar este método para asignar controladores el nombre pierde el on y queda en minúsculas. Ah, el parámetro tercero (true/false), es opcional (se refiere al orden en que se atienedne los eventos en elementos anidados).
En esas lineas asocias a los enlaces del tipo href="#indent" el controlador de eventos animScroll(), cuyo funcionamiento vas a ver que no es nada complicado.
Ya has visto la novedad que quería contarte en este script, ahora vamos al controlador, el que permite que la pantalla haga un scroll automático suave.
function animScroll() {
var id, dst, despY;
event.preventDefault();
id = event.currentTarget.hash.replace(/#/, '');
dst = document.getElementById(id);
despY = parseInt(dst.getBoundingClientRect().top)
window.scrollBy({
left: 0, top: despY, behavior: 'smooth'
});
} ¿No dirás que es complejo? Básicamente lo que hace este script es
- Extraer el identificador del area de destino (lo que va detrás de # en el href)
- Buscar la posición del destino relativa el borde de la pantlla (despY)
- Decirle a la ventana que haga un scroll suave hasta esa altura
El método window.scrollBy(offset X, offset Y, método de scroll) hace un desplazamiento relativo en la ventana del navegador.
Verás scripts más complejos para lograr efectos de scroll sofisticados. Pero esto cumple perfectamente su misión: provocar un scroll suave desde el enlace al destino. La pega: no puedes controlar la rapidez con que se va a mover la ventana.