Hei! Înainte de a merge prea departe în jos gaura de iepure de defilare buna pe bază de JavaScript, știu că există o caracteristică CSS nativ pentru acest lucru: scroll-behavior.
html ( scroll-behavior: smooth; )Și înainte de a ajunge la o bibliotecă ca jQuery pentru a vă ajuta, există, de asemenea, o versiune JavaScript nativă de defilare lină, ca aceasta:
// 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 are o poliamidă pentru aceasta. Și probabil că ați ajunge la acest lucru numai dacă faceți ceva cu derularea paginii care nu se putea face cu #target jump links și CSS.
Accesibilitatea derulării Smooth
Indiferent de tehnologia pe care o utilizați pentru o defilare lină, accesibilitatea este o preocupare. De exemplu, dacă faceți clic pe un #hashlink, comportamentul nativ este ca browserul să schimbe focalizarea pe elementul care corespunde acelui ID. Pagina poate derula, dar derularea este un efect secundar al schimbării focalizării.
Dacă modificați comportamentul de schimbare de focalizare prestabilită (care trebuie, pentru a preveni instantanee defilare și pentru a permite buna derulare), trebuie să se ocupe de tine schimbarea focus- .
Heather Migliorisi a scris despre acest lucru, cu soluții de cod, în Smooth Scrolling and Accessibility.
Derulați fără probleme cu jQuery
De asemenea, jQuery poate face acest lucru. Iată codul pentru a efectua o derulare netedă a paginii până la o ancoră pe aceeași pagină. Are o logică încorporată pentru a identifica acele legături de salt și pentru a nu viza alte legături.
// 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 ); )); ) ) ));Vedeți pagina Smooth Pen Derulare în jQuery de Chris Coyier (@chriscoyier) pe CodePen.
Dacă ați folosit acest cod și sunteți cu toții ca HEY WHATSS WITH THE BLUE OUTLINES?!, Citiți lucrurile despre accesibilitate de mai sus.