Faceți linkurile pe aceeași pagină ușor mai plăcute de utilizat cu acest efect nativ de defilare lină.

Smooth Scrolling este o tehnică folosită în dezvoltarea web pentru a crea o experiență fluidă de defilare pentru utilizatori. Îmbunătățește navigarea într-o pagină web prin animarea mișcării de defilare în loc de saltul brusc implicit.

Acest ghid cuprinzător pentru dezvoltatorii web vă va ajuta să implementați derularea lină folosind JavaScript.

Derularea lină este atunci când o pagină web derulează fără probleme la secțiunea dorită, în loc să sară acolo instantaneu. Acest lucru face ca experiența de defilare să fie mai plăcută și mai simplă pentru utilizator.

Derularea lină poate îmbunătăți experiența utilizatorului unei pagini web în mai multe moduri:

  • Îmbunătățește atractivitatea vizuală eliminând săriturile bruște și șocante de scroll, adăugând o notă de eleganță.
  • Încurajează implicarea utilizatorilor oferind o experiență de defilare fluidă și fără întreruperi. Acest lucru, la rândul său, motivează utilizatorii să exploreze conținutul în continuare.
  • În cele din urmă, derularea lină facilitează navigarea utilizatorilor, în special atunci când au de-a face cu pagini web lungi sau când se deplasează între diferite secțiuni.

Pentru a implementa derularea lină, puteți modifica comportamentul implicit de defilare folosind JavaScript.

Structura HTML

Mai întâi, creați elementele de marcare necesare pentru diferitele ferestre de vizualizare și navigarea pentru a derula între ele.

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>

Acest HTML constă dintr-o bară de navigare care conține trei etichete de ancorare. Atributul href al fiecărei ancori specifică identificatorul unic al secțiunii țintă (de exemplu, secțiunea 1, secțiunea 2, secțiunea 3). Acest lucru asigură că fiecare link pe care faceți clic navighează la elementul țintă corespunzător.

Stilul CSS

Apoi, aplicați niște CSS pentru a face pagina vizibil atrăgătoare și organizată. Adăugați următoarele la stil.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;
}

Aceasta va reda legăturile ca un rând de butoane și fiecare secțiune ca un element de înălțime completă. Dar observați cum, făcând clic pe un link, browserul să sară instantaneu la secțiunea corespunzătoare, fără animație.

Implementarea JavaScript

În altă parte, pentru a adăuga o animație lină atunci când faceți clic pe o etichetă de ancorare, utilizați metoda scrollIntoView(). Metoda scrollIntoView() este a metoda JavaScript încorporată din clasa Element care vă permite să defilați un element în zona vizibilă a ferestrei browserului.

Când apelați această metodă, browserul ajustează poziția de defilare a containerului elementului (cum ar fi fereastra sau un container derulabil) pentru a face elementul vizibil.

Adăugați codul JavaScript la script.js fişier. Începeți prin a asculta evenimentul DOMContentLoaded să se declanșeze înainte de a face orice altceva. Acest lucru asigură că rulează numai apel invers când DOM-ul este complet încărcat și este gata să manipuleze.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Apoi, definiți makeLinksSmooth() funcţie. Începeți prin a selecta etichetele de ancorare în navigare, deoarece veți dori să le modificați comportamentul. Apoi, repetați peste fiecare link și adăugați un ascultător de eveniment pentru evenimentul de clic al acestuia.

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

În cele din urmă, definiți smoothScroll() funcție care preia un obiect ascultător de evenimente. Apelați preventDefault() pentru a vă asigura că browserul nu efectuează acțiunea implicită atunci când faceți clic pe link. Codul care urmează îl va înlocui.

Luați valoarea href a etichetei de ancorare curente și stocați-o într-o variabilă. Această valoare ar trebui să fie ID-ul secțiunii țintă, cu prefixul „#”, așa că utilizați-o pentru a selecta elementul secțiunii prin querySelector(). Dacă targertElement este prezent, rulați it scrollIntoView metoda și treceți comportamentul „neted” într-un parametru de obiect pentru a finaliza efectul.

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

Cu aceasta, pagina web terminată va derula fără probleme la fiecare secțiune când faceți clic pe un link:

Pentru a îmbunătăți și mai mult experiența de defilare lină, puteți regla anumite aspecte.

Puteți regla poziția verticală a derulării folosind butonul bloc proprietatea argumentului setărilor. Utilizați valori precum „start”, „center” sau „end” pentru a identifica partea din elementul țintă la care să derulați:

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

Adăugarea de efecte de uşurare

Aplicați efecte de relaxare la animația de defilare pentru a crea o tranziție mai naturală și mai atractivă din punct de vedere vizual. Funcții de simplificare, cum ar fi ease-in, ease-out sau personalizat curbe cubic-bezier poate controla accelerația și decelerația mișcării scroll. Puteți utiliza o funcție de sincronizare personalizată cu proprietatea CSS cu comportamentul de defilare sau o bibliotecă JavaScript, cum ar fi „defilare netedă”, pentru a obține același rezultat.

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

Asigurați-vă că implementarea derulării fără probleme funcționează în mod constant în diferite browsere. Testați și gestionați orice neconformități sau neconcordanțe specifice browserului care pot apărea.

Puteți folosi un site web ca Pot folosi pentru a testa compatibilitatea browser-ului la construirea. Luați în considerare utilizarea unei biblioteci JavaScript sau polyfill pentru a asigura compatibilitatea între browsere și pentru a oferi o experiență perfectă pentru toți utilizatorii.

Defilarea lină adaugă o notă de eleganță și îmbunătățește experiența utilizatorului prin crearea unui efect de defilare fluid și plăcut vizual. Urmând pașii prezentați în acest ghid, dezvoltatorii web pot implementa derularea lină folosind JavaScript.

Reglarea fină a comportamentului de defilare, adăugarea de efecte de relaxare și asigurarea compatibilității între browsere vor îmbunătățește și mai mult experiența de defilare lină, făcând paginile web mai atractive și mai plăcute naviga.