Hallå! Innan du går för långt ner i kaninhålet JavaScript-baserade mjuk rullning, vet att det är en infödd CSS funktion för detta: scroll-behavior.
html ( scroll-behavior: smooth; )Och innan du sträcker efter ett bibliotek som jQuery för att hjälpa, finns det också en integrerad JavaScript-version av smidig rullning, så här:
// 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 har en polyfyll för detta. Och du skulle förmodligen bara nå det här om du gjorde något med att bläddra på sidan som inte kunde göras med #target hopplänkar och CSS.
Tillgänglighet för smidig rullning
Oavsett vilken teknik du använder för smidig rullning är tillgänglighet ett problem. Om du till exempel klickar på en #hashlänk är det naturliga beteendet att webbläsaren ändrar fokus till det element som matchar det ID: t. Sidan kan rulla, men rullningen är en bieffekt av att fokus ändras.
Om du åsidosätter standardbeteendet för fokusförändring (som du måste, för att förhindra omedelbar rullning och aktivera smidig rullning), måste du hantera fokusförändringen själv .
Heather Migliorisi skrev om detta, med kodlösningar, i Smooth Scrolling and Accessibility.
Smidig rullning med jQuery
jQuery kan också göra detta. Här är koden för att utföra en smidig sida bläddra till ett ankare på samma sida. Den har inbyggd logik för att identifiera dessa hopplänkar och inte rikta in sig på andra länkar.
// 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 ); )); ) ) ));Se pennens smidiga sidrullning i jQuery av Chris Coyier (@chriscoyier) på CodePen.
Om du har använt den här koden och alla är som HEY WHAT'S WITH THE BLUE OUTLINES?!, Läs sakerna om tillgänglighet ovan.