¡Oye! Antes de ir demasiado lejos en la madriguera del desplazamiento suave basado en JavaScript, sepa que hay una función CSS nativa para esto: scroll-behavior
.
html {
scroll-behavior: smooth;
}
Y antes de buscar una biblioteca como jQuery para ayudar, también hay una versión nativa de JavaScript de desplazamiento suave, como esta:
// Scroll to specific values
// scrollTo is the same
window.scroll({
top: 2500,
left: 0,
behavior: 'smooth'
});
// Scroll certain amounts from current position
window.scrollBy({
top: 100, // could be negative value
left: 0,
behavior: 'smooth'
});
// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({
behavior: 'smooth'
});
Dustan Kasten tiene un polyfill para esto. Y probablemente solo lo alcanzaría si estuviera haciendo algo con el desplazamiento de la página que no se podría hacer con los enlaces de salto #target y CSS.
Accesibilidad de desplazamiento suave
Independientemente de la tecnología que utilice para un desplazamiento fluido, la accesibilidad es una preocupación. Por ejemplo, si hace clic en un #hash
enlace, el comportamiento nativo es que el navegador cambie el foco al elemento que coincida con ese ID. La página puede desplazarse, pero el desplazamiento es un efecto secundario del cambio de enfoque.
Si anula el comportamiento de cambio de enfoque predeterminado (que debe hacer, para evitar el desplazamiento instantáneo y permitir un desplazamiento suave), debe manejar el cambio de enfoque usted mismo.
Heather Migliorisi escribió sobre esto, con soluciones de código, en Desplazamiento suave y Accesibilidad.
Desplazamiento suave con jQuery
jQuery también puede hacer esto. Aquí está el código para realizar un desplazamiento de página suave a un ancla en la misma página. Tiene algo de lógica incorporada para identificar esos enlaces de salto y no apuntar a otros enlaces.
// Select all links with hashes
$('a[href*="https://css-tricks.com/snippets/jquery/smooth-scrolling/#"]')
// Remove links that don't actually link to anything
.not('[href="https://css-tricks.com/snippets/jquery/smooth-scrolling/#"]')
.not('[href="https://css-tricks.com/snippets/jquery/smooth-scrolling/#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=" + this.hash.slice(1) + "]');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
Vea el desplazamiento suave de la página con lápiz en jQuery por Chris Coyier (@chriscoyier) en CodePen.
Si ha utilizado este código y todos son como ¡¿HEY QUÉ HAY CON LOS CONJUNTOS AZULES?!, Lea el material sobre accesibilidad anterior.