Hei! Ennen kuin menet liian pitkälle kaninkoloon JavaScript-pohjainen tasainen vieritys, tietää, että on kotoisin CSS piirre tälle: scroll-behavior.
html ( scroll-behavior: smooth; )Ja ennen kuin etsit apua jQuery-kirjastosta, on myös sujuva vieritys natiivi JavaScript-versio, kuten tämä:
// 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 Kastenilla on tätä varten polyfill. Ja tavoitat todennäköisesti vain tämän, jos tekisit jotain vierittämällä sivua, jota ei voitu tehdä #target-hyppölinkeillä ja CSS: llä.
Tasaisen vierityksen saavutettavuus
Riippumatta siitä, mitä tekniikkaa käytät sujuvaan vieritykseen, esteettömyys on huolenaihe. Jos esimerkiksi napsautat #hashlinkkiä, selaimen natiivikäyttäytymisen on vaihdettava kohdistus kyseistä tunnusta vastaavaan elementtiin. Sivu voi vierittää, mutta vieritys on sivuvaikutus tarkennuksen muutoksesta.
Jos ohitat tarkennuksen muuttamisen oletuskäyttäytymisen (joka sinun on tehtävä, jotta estät välittömän vierityksen ja sujuvan vierityksen), sinun on käsiteltävä tarkennuksen muutos itse .
Heather Migliorisi kirjoitti tästä koodiratkaisuilla Smooth Scrolling and Accessibility -sivulla.
Tasainen vieritys jQueryn kanssa
jQuery voi myös tehdä tämän. Tässä on koodi sujuvan sivun vierittämiseksi ankkurille samalla sivulla. Siinä on sisäänrakennettu logiikka tunnistaa nuo siirtolinkit eikä kohdistaa muihin linkkeihin.
// 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 ); )); ) ) ));Katso Chris Coyierin (@chriscoyier) kynän tasainen sivun vieritys jQueryssä CodePenissä.
Jos olet käyttänyt tätä koodia ja olet kaikki kuin Hei, MIKÄ ON SINISET OUTLINES??, Lue yllä olevat esteettömyysohjeet.