Hej! Prije nego što idete predaleko niz zečju rupu u JavaScript-based glatka pomicanja, znam da je rodom CSS značajka za ovo: scroll-behavior.
html ( scroll-behavior: smooth; )I prije nego što posegnete za bibliotekom poput jQuery-a za pomoć, postoji i izvorna JavaScript verzija glatkog pomicanja, poput ove:
// 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 za to ima polifil. A za tim biste vjerojatno posegnuli samo ako radite nešto sa pomicanjem stranice, a to se ne može učiniti pomoću #target jump linkova i CSS-a.
Dostupnost glatkog pomicanja
Koju god tehnologiju da koristite za glatko pomicanje, pristupačnost je problem. Na primjer, ako kliknete #hashvezu, izvorno ponašanje preglednik će promijeniti fokus na element koji odgovara tom ID-u. Stranica se može pomicati, ali pomicanje je nuspojava promjene fokusa.
Ako nadjačate zadano ponašanje promjene fokusa (što morate, da biste spriječili trenutno pomicanje i omogućili glatko pomicanje), promjenu fokusa morate riješiti sami .
O tome je Heather Migliorisi, s rješenjima koda, pisala u glatkom pomicanju i pristupačnosti.
Glatko pomicanje s jQueryjem
jQuery to također može učiniti. Evo koda za izvođenje glatkog pomicanja stranice do sidra na istoj stranici. Ima ugrađenu logiku za identificiranje tih skočnih veza, a ne za ciljanje drugih veza.
// 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 ); )); ) ) ));Pogledajte pomicanje stranice glatkom olovkom u jQuery Chrisa Coyiera (@chriscoyier) na CodePenu.
Ako ste koristili ovaj kôd i svi ste poput HEJ ŠTO JE S PLAVIM OBRATIMA?!, Pročitajte gore o dostupnosti.