Hei! Pirms jūs iet pārāk tālu uz leju trušu caurums JavaScript balstītas vienmērīgu ritināšanu, zinu, ka ir dzimtā CSS iezīme šo: scroll-behavior.
html ( scroll-behavior: smooth; )Pirms meklējat palīdzību, piemēram, jQuery, ir arī vietējā JavaScript versija, kas nodrošina vienmērīgu ritināšanu, piemēram:
// 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' ));Dustanam Kastenam tam ir polifill. Un jūs, iespējams, to sasniegtu tikai tad, ja kaut ko darītu, ritinot lapu, ko nevarētu izdarīt ar # Target jump saitēm un CSS.
Vienmērīgas ritināšanas pieejamība
Neatkarīgi no tehnoloģijas, kuru izmantojat vienmērīgai ritināšanai, pieejamība rada bažas. Piemēram, noklikšķinot uz #hashsaites, pārlūkprogrammai parasti ir jāmaina fokuss uz elementu, kas atbilst šim ID. Lapa var ritināt, bet ritināšana ir fokusa maiņas blakus efekts.
Ja jūs ignorējat noklusējuma fokusa maiņas uzvedību (kas jums jādara, lai novērstu tūlītēju ritināšanu un iespējotu vienmērīgu ritināšanu), fokusa maiņa ir jārisina pašam .
Hetere Migliorisi par to ar koda risinājumiem rakstīja vietnē Smooth Scrolling and Accessibility.
Gluda ritināšana ar jQuery
To var izdarīt arī jQuery. Šeit ir kods, lai vienmērīgi lappusē ritinātu līdz enkuram tajā pašā lapā. Tam ir iebūvēta loģika, lai identificētu šīs lēciena saites, nevis mērķētu uz citām saitēm.
// 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 ); )); ) ) ));Skatiet Krāsa Koijera (@chriscoyier) pildspalvas gludās lapas ritināšanu jQuery vietnē CodePen.
Ja esat izmantojis šo kodu un visi esat līdzīgi VIŅAM, KAS IR AR ZILĀM APRĀVĒM?!, Lasiet iepriekš pieejamo informāciju par pieejamību