Hei! Før du går for langt ned i kaninhullet av Javascript-baserte jevn rulling, vet at det er en innfødt CSS funksjon for dette: scroll-behavior.
html ( scroll-behavior: smooth; )Og før du når et bibliotek som jQuery for å hjelpe, er det også en innfødt JavaScript-versjon av jevn rulling, slik:
// 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 for dette. Og du vil sannsynligvis bare nå dette hvis du gjorde noe med å bla siden som ikke kunne gjøres med #target jump links og CSS.
Tilgjengelighet av jevn rulling
Uansett hvilken teknologi du bruker for jevn rulling, er tilgjengelighet et problem. Hvis du for eksempel klikker på en #hashlenke, er den opprinnelige atferden at nettleseren endrer fokus til elementet som samsvarer med den IDen. Siden kan rulle, men rullingen er en bivirkning av at fokus endres.
Hvis du overstyrer standard atferden for fokusendring (som du må, for å forhindre øyeblikkelig rulling og aktivere jevn rulling), må du håndtere fokusendringen selv .
Heather Migliorisi skrev om dette, med kodeløsninger, i Smooth Scrolling and Accessibility.
Smooth Scroll med jQuery
jQuery kan også gjøre dette. Her er koden for å utføre en jevn side, bla til et anker på samme side. Den har noen logikk innebygd for å identifisere disse hoppkoblingene, og ikke målrette mot andre lenker.
// 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 glatte siderulling i jQuery av Chris Coyier (@chriscoyier) på CodePen.
Hvis du har brukt denne koden og alle er som HEY WHAT'S WITH THE BLUE OUTLINES?!, Kan du lese ting om tilgjengelighet ovenfor.