Hei! Enne kui minna liiga kaugele ette küüliku augu JavaScripti baasil sujuvat kerimist tean, et seal on native CSS funktsiooni see: scroll-behavior.
html ( scroll-behavior: smooth; )Ja enne kui otsite sellist raamatukogu nagu jQuery, on olemas ka sujuva kerimise JavaScripti natiivversioon:
// 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 Kastenil on selleks polüfill. Ja tõenäoliselt jõuaksite selle poole ainult siis, kui teete lehe kerimisega midagi sellist, mida ei saa teha # Target jump-linkide ja CSS-iga.
Sujuva kerimise juurdepääsetavus
Ükskõik millist tehnoloogiat sujuva kerimise jaoks kasutate, on juurdepääsetavus murettekitav. Näiteks kui klõpsate #hashlingil, on brauseri tavapärane käitumine selline, et brauser muudab fookuse sellele ID-le vastavaks elemendiks. Leht võib kerida, kuid kerimine on fookuse muutmise kõrvalmõju.
Kui alistate fookuse muutmise vaikekäitumise (mida peate tegema, et vältida kohest kerimist ja sujuva kerimise võimaldamist), peate fookuse muutmisega ise hakkama saama .
Heather Migliorisi kirjutas sellest koodilahendustega raamatus Smooth Scrolling and Accessibility.
Sujuv kerimine jQuery abil
jQuery saab ka seda teha. Siin on kood sujuva lehe kerimiseks ankurile samal lehel. Sellel on sisseehitatud teatud loogika, et tuvastada need hüppelingid ja mitte sihtida teisi linke.
// 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 ); )); ) ) ));Vaadake Code Cenil Chris Coyieri (@chriscoyier) pliiatsi sileda lehe kerimist jQuery's.
Kui olete seda koodi kasutanud ja olete kõik nagu Hei, mis on siniste piirjoonedega?!, Lugege ülaltoodud ligipääsetavust käsitlevat teavet.