Ei! Prieš išvykdami per toli žemyn triušio skylę JavaScript pagrįstos sklandžiai slinkimą, žinau, kad yra gimtoji CSS funkcija tokia: scroll-behavior.
html ( scroll-behavior: smooth; )Prieš ieškodami tokios bibliotekos kaip „jQuery“, taip pat yra savaiminė „JavaScript“ sklandaus slinkimo versija, tokia:
// 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' ));Dustanas Kastenas turi tam skirtą užpildą. To tikriausiai pasiektumėte tik tuo atveju, jei slinkdami puslapį darytumėte ką nors, ko nepavyko padaryti naudojant #target jump links ir CSS.
Sklandaus slinkimo prieinamumas
Nepriklausomai nuo technologijos, kurią naudojate sklandžiam slinkimui, prieinamumas kelia susirūpinimą. Pvz., Spustelėjus #hashnuorodą, įprasta naršyklė turi pakeisti dėmesį į tą ID atitinkantį elementą. Puslapis gali slinkti, bet slinkimas yra šalutinis fokusavimo pasikeitimo poveikis.
Jei nepaisote numatytojo židinio keitimo elgesio (kurį turite padaryti, kad išvengtumėte momentinio slinkimo ir įgalintumėte sklandų slinkimą), židinio keitimą turite atlikti patys .
Heather Migliorisi rašė apie tai, naudodama kodo sprendimus, sklandžiai slinkdama ir pritaikyta neįgaliesiems.
Sklandus slinkimas su „jQuery“
„jQuery“ taip pat gali tai padaryti. Štai kodas, kad sklandžiai puslapis slinktų į inkarą tame pačiame puslapyje. Joje yra tam tikra logika, leidžianti nustatyti tas šuolio nuorodas, o ne nukreipti į kitas nuorodas.
// 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 ); )); ) ) ));Žr. Chriso Coyierio (@chriscoyier) „CodePen“ sklandų rašiklio sklandų puslapio slinkimą „jQuery“.
Jei naudojote šį kodą ir visi esate panašūs į JĄ, KAS YRA MĖLYNOSIOS PASTABOS?