Hey! Prima di andare troppo lontano nella tana del coniglio di scorrimento uniforme basato su JavaScript, sapere che c'è una caratteristica CSS nativo per questo: scroll-behavior.
html ( scroll-behavior: smooth; )E prima di raggiungere una libreria come jQuery per aiutarti, c'è anche una versione JavaScript nativa dello scorrimento fluido, come questa:
// 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 ha un polyfill per questo. E probabilmente lo raggiungeresti solo se stavi facendo qualcosa con lo scorrimento della pagina che non è stato possibile fare con i collegamenti di salto #target e CSS.
Accessibilità dello scorrimento fluido
Qualunque sia la tecnologia utilizzata per uno scorrimento fluido, l'accessibilità è un problema. Ad esempio, se fai clic su un #hashcollegamento, il comportamento nativo è che il browser sposti il focus sull'elemento che corrisponde a quell'ID. La pagina può scorrere, ma lo scorrimento è un effetto collaterale della modifica dello stato attivo.
Se sovrascrivi il comportamento predefinito di modifica del focus (cosa che devi fare, per impedire lo scorrimento istantaneo e abilitare lo scorrimento fluido), devi gestire tu stesso il cambio del focus .
Ne ha scritto Heather Migliorisi, con soluzioni di codice, in Smooth Scrolling e Accessibility.
Scorrimento fluido con jQuery
jQuery può anche farlo. Ecco il codice per eseguire uno scorrimento fluido della pagina fino a un ancoraggio sulla stessa pagina. Ha una logica incorporata per identificare quei collegamenti di salto e non indirizzare altri collegamenti.
// 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 ); )); ) ) ));Vedere lo scorrimento della pagina uniforme della penna in jQuery di Chris Coyier (@chriscoyier) su CodePen.
Se hai usato questo codice e sei come HEY WHAT'S WITH THE BLUE OUTLINES?!, Leggi le informazioni sull'accessibilità sopra.