Padariet savas lapas saites nedaudz jaukākas lietošanai, izmantojot šo vietējo vienmērīgās ritināšanas efektu.

Vienmērīga ritināšana ir paņēmiens, ko izmanto tīmekļa izstrādē, lai lietotājiem radītu plūstošu ritināšanu. Tas uzlabo navigāciju tīmekļa lapā, animējot ritināšanas kustību, nevis noklusējuma pēkšņu lēcienu.

Šis visaptverošais ceļvedis tīmekļa izstrādātājiem palīdzēs ieviest vienmērīgu ritināšanu, izmantojot JavaScript.

Vienmērīga ritināšana ir tad, kad tīmekļa lapa vienmērīgi ritina līdz vajadzīgajai sadaļai, nevis uzreiz pāriet tur. Tas padara ritināšanas pieredzi lietotājam patīkamāku un nemanāmāku.

Vienmērīga ritināšana var uzlabot tīmekļa lapas lietotāja pieredzi vairākos veidos.

  • Tas uzlabo vizuālo pievilcību, novēršot pēkšņus un satricinošus ritināšanas lēcienus, pievienojot elegances pieskārienu.
  • Tas veicina lietotāju iesaistīšanos, nodrošinot plūstošu un vienmērīgu ritināšanas pieredzi. Tas savukārt motivē lietotājus izpētīt saturu tālāk.
  • Visbeidzot, vienmērīga ritināšana lietotājiem atvieglo navigāciju, jo īpaši, strādājot ar garām tīmekļa lapām vai pārvietojoties starp dažādām sadaļām.
    instagram viewer

Lai ieviestu vienmērīgu ritināšanu, varat mainīt noklusējuma ritināšanas darbību, izmantojot JavaScript.

HTML struktūra

Vispirms izveidojiet nepieciešamos iezīmēšanas elementus dažādiem skata logiem un navigāciju, lai ritinātu starp tiem.

html>
<htmllang="en">
<head>
 <metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="./style.css" />
<title>Smooth Scrolling Guide for Web Developerstitle>
head>


<body>
<nav>
<ul>
<li><ahref="#section1">Section 1a>li>
<li><ahref="#section2">Section 2a>li>
<li><ahref="#section3">Section 3a>li>
ul>
nav>


<sectionid="section1">
<h2>Section 1h2>
section>


<sectionid="section2">
<h2>Section 2h2>
section>


<sectionid="section3">
<h2>Section 3h2>
section>


<scriptsrc="./script.js">script>
body>
html>

Šis HTML sastāv no navigācijas joslas, kurā ir trīs enkura tagi. Katra enkura atribūts href norāda mērķa sadaļas unikālo identifikatoru (piemēram, sadaļa1, sadaļa2, sadaļa 3). Tas nodrošina, ka katra saite, uz kuras noklikšķināt, tiek novirzīta uz atbilstošo mērķa elementu.

CSS stils

Pēc tam izmantojiet CSS, lai lapa būtu redzami pievilcīga un sakārtota. Pievienojiet tālāk norādīto stils.css:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "SegoeUI", Tahoma, Geneva, Verdana, sans-serif;
}


nav {
background: #fff;
box-shadow: 3px 3px 5pxrgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}


navul {
display: flex;
gap: 10px;
justify-content: center;
}


navulli {
list-style: none;
}


navullia {
border-radius: 5px;
border: 1.5pxsolid#909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

Tādējādi saites tiks attēlotas kā pogu rinda un katra sadaļa kā pilna augstuma elements. Taču ievērojiet, kā, noklikšķinot uz saites, pārlūkprogramma nekavējoties pāriet uz atbilstošo sadaļu bez animācijas.

JavaScript ieviešana

Citos gadījumos, lai pievienotu vienmērīgu animāciju, noklikšķinot uz enkura taga, izmantojiet metodi scrollIntoView(). Metode scrollIntoView() ir a iebūvēta JavaScript metode no klases Elements, kas ļauj ritināt elementu pārlūkprogrammas loga redzamajā apgabalā.

Izsaucot šo metodi, pārlūkprogramma pielāgo elementa konteinera (piemēram, loga vai ritināmā konteinera) ritināšanas pozīciju, lai elements būtu redzams.

Pievienojiet savu JavaScript kodu vietnei script.js failu. Vispirms noklausieties, vai DOMContentLoaded notikums tiek aktivizēts, pirms veicat kaut ko citu. Tas nodrošina, ka atzvanīšana darbojas tikai kad DOM ir pilnībā ielādēts un ir gatavs manipulēt.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Tālāk definējiet makeLinksSmooth() funkciju. Sāciet, atlasot enkura tagus navigācijā, jo vēlaties mainīt to darbību. Pēc tam atkārtojiet katru saiti un pievienojiet tās klikšķa notikumam notikumu uztvērēju.

functionmakeLinksSmooth() { 
const navLinks = document.querySelectorAll("nav a"); 
 navLinks.forEach((link) => {
 link.addEventListener("click", smoothScroll);
 });
}

Visbeidzot, definējiet smoothScroll() funkcija, kas aizņem notikumu klausītāja objektu. Izsauciet preventDefault(), lai nodrošinātu, ka pārlūkprogramma neveic noklusējuma darbību, kad noklikšķināt uz saites. Nākamais kods to aizstās.

Satveriet pašreizējā enkura taga href vērtību un saglabājiet to mainīgajā. Šai vērtībai ir jābūt mērķa sadaļas ID ar prefiksu “#”, tāpēc izmantojiet to, lai atlasītu sadaļas elementu, izmantojot querySelector(). Ja ir klāt targertElement, palaidiet to ritiniet skatā metodi un nododiet "gludu" uzvedību objekta parametrā, lai pabeigtu efektu.

functionsmoothScroll(e) {
 e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId);
if (targetElement) { 
 targetElement.scrollIntoView({ behavior: "smooth", });
 }
}

Tādējādi jūsu gatavā tīmekļa lapa vienmērīgi ritinās uz katru sadaļu, kad noklikšķināsit uz saites:

Lai vēl vairāk uzlabotu vienmērīgās ritināšanas pieredzi, varat precizēt noteiktus aspektus.

Varat pielāgot ritināšanas vertikālo pozīciju, izmantojot bloķēt iestatījumu argumenta īpašība. Izmantojiet tādas vērtības kā "sākums", "centrs" vai "beigas", lai identificētu mērķa elementa daļu, uz kuru ritināt:

targetElement.scrollIntoView({ behavior: "smooth", block: "end" });

Atvieglojumu efektu pievienošana

Lietojiet ritināšanas animācijas atvieglošanas efektus, lai izveidotu dabiskāku un vizuāli pievilcīgāku pāreju. Atvieglināšanas funkcijas, piemēram, atvieglošana, atvieglošana vai pielāgota kubiskā-bezīra līknes var kontrolēt ritināšanas kustības paātrinājumu un palēninājumu. Lai sasniegtu tādu pašu rezultātu, varat izmantot pielāgotu laika funkciju ar ritināšanas uzvedības CSS rekvizītu vai JavaScript bibliotēku, piemēram, “smooth-scroll”.

/* CSS to apply easing effect */
html {
scroll-behavior: smooth;
/* Custom cubic-bezier easing */
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}

Gādājiet, lai jūsu vienmērīgā ritināšanas ieviešana darbotos konsekventi dažādās pārlūkprogrammās. Pārbaudiet un apstrādājiet visas pārlūkprogrammai raksturīgās dīvainības vai neatbilstības, kas var rasties.

Varat izmantot vietni, piemēram Vai es varu izmantot lai pārbaudītu pārlūkprogrammas atbalstu, veidojot. Apsveriet iespēju izmantot JavaScript bibliotēku vai polifiliju, lai nodrošinātu vairāku pārlūkprogrammu saderību un nodrošinātu nevainojamu pieredzi visiem lietotājiem.

Vienmērīga ritināšana piešķir elegances pieskārienu un uzlabo lietotāja pieredzi, radot plūstošu un vizuāli patīkamu ritināšanas efektu. Veicot šajā rokasgrāmatā aprakstītās darbības, tīmekļa izstrādātāji var ieviest vienmērīgu ritināšanu, izmantojot JavaScript.

Ritināšanas darbības precizēšana, atvieglošanas efektu pievienošana un vairāku pārlūkprogrammu saderības nodrošināšana vēl vairāk uzlabojiet vienmērīgu ritināšanu, padarot jūsu tīmekļa lapas saistošākas un patīkamākas pārvietoties.