Hej! Før du går for langt ned i kaninhullet af JavaScript-baserede jævn rulning, ved, at der er en indfødt CSS funktion for dette: scroll-behavior.
html ( scroll-behavior: smooth; )Og før du når ud til et bibliotek som jQuery for at hjælpe, er der også en native JavaScript-version af glat rulning, som denne:
// 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 polyfyld til dette. Og du ville sandsynligvis kun nå ud til dette, hvis du lavede noget med at rulle på siden, der ikke kunne gøres med #target jump links og CSS.
Tilgængelighed af jævn rulning
Uanset hvilken teknologi du bruger til jævn rulning, er tilgængelighed et problem. For eksempel, hvis du klikker på et #hashlink, er det den oprindelige adfærd, at browseren ændrer fokus til det element, der matcher det ID. Siden kan muligvis rulle, men rulningen er en bivirkning af, at fokus ændres.
Hvis du tilsidesætter standardfokusændringsadfærd (som du skal, for at forhindre øjeblikkelig rulning og aktivere glat rulning), skal du selv håndtere fokusændringen .
Heather Migliorisi skrev om dette med kodeløsninger i Smooth Scrolling and Accessibility.
Glat rulle med jQuery
jQuery kan også gøre dette. Her er koden til at udføre en jævn side, rul til et anker på samme side. Det har en vis logik indbygget til at identificere disse springlinks og ikke målrette mod andre links.
// 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 side, der ruller i jQuery af Chris Coyier (@chriscoyier) på CodePen.
Hvis du har brugt denne kode, og du alle kan lide HEY HVAD ER DET MED DE BLÅ OUTLINES?!, Så læs tingene om tilgængelighed ovenfor.