Zdravo! Preden greste predaleč navzdol zajec luknjo v osnovi JavaScript gladko drsenje, ve, da je materni CSS funkcija za to: scroll-behavior.
html ( scroll-behavior: smooth; )In preden za pomoč posežete po knjižnici, kot je jQuery, obstaja tudi izvorna različica gladkega drsenja JavaScript, kot je ta:
// 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 ima za to polnilo. In tega bi verjetno posegli le, če bi s pomikanjem po strani počeli nekaj, česar s povezavami #target jump in CSS ni bilo mogoče storiti.
Dostopnost gladkega pomikanja
Ne glede na tehnologijo, ki jo uporabljate za gladko drsenje, je dostopnost zaskrbljujoča. Če na primer kliknete #hashpovezavo, je izvorno vedenje, da brskalnik spremeni fokus na element, ki ustreza temu ID-ju. Stran se lahko pomika, vendar je pomikanje stranski učinek spremembe ostrenja.
Če preglasite privzeto vedenje spreminjanja fokusa (kar morate storiti, da preprečite takojšnje drsenje in omogočite nemoteno drsenje), morate spreminjanje fokusa obravnavati sami .
Heather Migliorisi je o tem, z rešitvami kode, pisala v prispevku Smooth Scrolling and Accessibility.
Gladko drsenje z jQuery
jQuery lahko to tudi stori. Tu je koda za gladko pomikanje strani do sidra na isti strani. Vgrajena je nekaj logike za prepoznavanje povezav za preskok in ne za ciljanje na druge povezave.
// 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 ); )); ) ) ));Oglejte si Pen Smooth Page Scrolling v jQuery Chrisa Coyierja (@chriscoyier) na CodePen.
Če ste uporabili to kodo in ste vsi všeč HEY, kaj je z modrimi obrisi?!, Preberite o dostopnosti zgoraj.