Hallo! Voordat je te ver gaan in het konijnenhol van JavaScript-gebaseerde vloeiend schuiven, weten dat er een native functie CSS voor deze: scroll-behavior.
html ( scroll-behavior: smooth; )En voordat u naar een bibliotheek zoals jQuery reikt om te helpen, is er ook een native JavaScript-versie van vloeiend scrollen, zoals deze:
// 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 heeft hiervoor een polyfill. En je zou hier waarschijnlijk alleen naar grijpen als je iets deed met het scrollen van de pagina dat niet kon worden gedaan met #target jump-links en CSS.
Toegankelijkheid van soepel scrollen
Welke technologie u ook gebruikt om soepel te scrollen, toegankelijkheid is een punt van zorg. Als u bijvoorbeeld op een #hashlink klikt , is het native gedrag dat de browser de focus wijzigt naar het element dat overeenkomt met die ID. De pagina kan scrollen, maar het scrollen is een neveneffect van het veranderen van de focus.
Als u het standaard focusveranderende gedrag opheft (wat u moet doen om direct scrollen te voorkomen en vloeiend scrollen mogelijk te maken), moet u de focusverandering zelf afhandelen .
Heather Migliorisi schreef hierover, met code-oplossingen, in Smooth Scrolling and Accessibility.
Soepel scrollen met jQuery
jQuery kan dit ook doen. Hier is de code om een soepele paginascroll naar een anker op dezelfde pagina uit te voeren. Er is enige logica ingebouwd om die jumplinks te identificeren en niet om andere links te targeten.
// 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 ); )); ) ) ));Zie de Pen Smooth Page Scrolling in jQuery door Chris Coyier (@chriscoyier) op CodePen.
Als je deze code hebt gebruikt en je bent net HEY WHAT'S WITH THE BLUE OUTLINES ?!, lees dan de dingen over toegankelijkheid hierboven.