¡Oye! Antes de ir demasiado lejos en el agujero del conejo de desplazamiento suave basado en JavaScript, saber que hay una característica CSS nativo 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 #hashenlace, 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 hacerlo, para evitar el desplazamiento instantáneo y habilitar el desplazamiento suave), debe manejar el cambio de enfoque usted mismo .
Heather Migliorisi escribió sobre esto, con soluciones de código, en Smooth Scrolling and Accessibility.
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*="#")') // Remove links that don't actually link to anything .not('(href="#")') .not('(href="#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 ¡OYE, ¿QUÉ HAY CON LOS CONJUNTOS AZULES?