Učinite svoje veze na istoj stranici malo ljepšima za korištenje s ovim izvornim efektom glatkog pomicanja.

Glatko pomicanje je tehnika koja se koristi u web razvoju za stvaranje fluidnog iskustva pomicanja za korisnike. Poboljšava navigaciju unutar web-stranice animiranjem pokreta pomicanja umjesto zadanog naglog skoka.

Ovaj sveobuhvatni vodič za web programere pomoći će vam implementirati glatko pomicanje pomoću JavaScripta.

Glatko pomicanje je kada se web stranica glatko pomiče do željenog odjeljka, umjesto da tamo odmah skoči. To čini iskustvo pomicanja ugodnijim i besprijekornijim za korisnika.

Glatko pomicanje može poboljšati korisničko iskustvo web stranice na nekoliko načina:

  • Poboljšava vizualnu privlačnost eliminirajući nagle i nemirne skokove pomicanja, dodajući dašak elegancije.
  • Potiče angažman korisnika pružajući fluidno i besprijekorno iskustvo pomicanja. To zauzvrat motivira korisnike da dalje istražuju sadržaj.
  • Naposljetku, glatko pomicanje olakšava navigaciju korisnicima, osobito kada se radi o dugim web stranicama ili se kreće između različitih odjeljaka.
instagram viewer

Da biste implementirali glatko pomicanje, možete promijeniti zadano ponašanje pomicanja pomoću JavaScripta.

HTML struktura

Najprije izradite potrebne elemente označavanja za različite prozore i navigaciju za pomicanje između njih.

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>

Ovaj HTML sastoji se od navigacijske trake koja sadrži tri oznake sidra. Atribut href svakog sidra navodi jedinstveni identifikator ciljnog odjeljka (npr. odjeljak1, odjeljak2, odjeljak3). To osigurava da svaka veza koju kliknete vodi do odgovarajućeg ciljnog elementa.

CSS stiliziranje

Zatim primijenite neki CSS kako biste stranicu učinili vidljivo privlačnom i organiziranom. Dodajte sljedeće u 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;
}

Ovo će renderirati veze kao niz gumba i svaki odjeljak kao element pune visine. Ali primijetite kako klik na vezu uzrokuje trenutni skok preglednika na odgovarajući odjeljak, bez animacije.

Implementacija JavaScripta

Za dodavanje glatke animacije kada kliknete na oznaku sidra, upotrijebite metodu scrollIntoView(). Metoda scrollIntoView() je a ugrađena JavaScript metoda klase Element koja vam omogućuje pomicanje elementa u vidljivo područje prozora preglednika.

Kada pozovete ovu metodu, preglednik prilagođava položaj pomicanja spremnika elementa (kao što je prozor ili spremnik koji se može pomicati) kako bi element bio vidljiv.

Dodajte svoj JavaScript kôd u skripta.js datoteka. Započnite osluškivanjem događaja DOMContentLoaded koji će se aktivirati prije nego što učinite bilo što drugo. Ovo osigurava samo pokretanje povratnog poziva kada je DOM potpuno učitan i spreman je manipulirati.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Zatim definirajte makeLinksSmooth() funkcija. Započnite odabirom oznaka sidra u navigaciji, budući da ćete htjeti izmijeniti njihovo ponašanje. Zatim iterirajte svaku vezu i dodajte slušatelja događaja za događaj klika.

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

Na kraju, definirajte smoothScroll() funkcija koja uzima objekt slušatelja događaja. Pozovite preventDefault() kako biste bili sigurni da preglednik ne izvodi zadanu radnju kada kliknete vezu. Kôd koji slijedi će ga zamijeniti.

Uzmite href vrijednost trenutne oznake sidra i pohranite je u varijablu. Ta bi vrijednost trebala biti ID ciljnog odjeljka, s prefiksom "#", pa je upotrijebite za odabir elementa odjeljka putem querySelector(). Ako je ciljni element prisutan, pokrenite ga scrollIntoView metodu i proslijedite "glatko" ponašanje u parametru objekta da dovršite učinak.

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

Uz to, vaša će se gotova web stranica glatko pomicati do svakog odjeljka kada kliknete na vezu:

Kako biste dodatno poboljšali iskustvo glatkog pomicanja, možete fino podesiti određene aspekte.

Možete podesiti okomiti položaj svitka pomoću blok svojstvo argumenta postavki. Upotrijebite vrijednosti kao što su "početak", "centar" ili "kraj" da identificirate dio ciljnog elementa do kojeg se pomiče:

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

Dodavanje efekata olakšavanja

Primijenite efekte ublažavanja na animaciju pomicanja kako biste stvorili prirodniji i vizualno privlačniji prijelaz. Funkcije olakšavanja kao što su ease-in, ease-out ili custom kubno-bezierove krivulje može kontrolirati ubrzanje i usporavanje pokreta svitka. Možete upotrijebiti prilagođenu funkciju mjerenja vremena s CSS svojstvom ponašanja pomicanja ili JavaScript biblioteku kao što je "smooth-scroll" kako biste postigli isti rezultat.

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

Osigurajte da vaša implementacija glatkog pomicanja radi dosljedno u različitim preglednicima. Testirajte i riješite sve nedostatke ili nedosljednosti specifične za preglednik koji se mogu pojaviti.

Možete koristiti web stranicu poput Mogu li koristiti za testiranje podrške preglednika prilikom izgradnje. Razmislite o korištenju JavaScript biblioteke ili polifilla kako biste osigurali kompatibilnost s više preglednika i omogućili besprijekorno iskustvo za sve korisnike.

Glatko pomicanje dodaje dašak elegancije i poboljšava korisničko iskustvo stvarajući fluidan i vizualno ugodan efekt pomicanja. Slijedeći korake navedene u ovom vodiču, web programeri mogu implementirati glatko pomicanje pomoću JavaScripta.

Fino podešavanje ponašanja pomicanja, dodavanje efekata olakšavanja i osiguravanje kompatibilnosti s više preglednika će dodatno poboljšati glatko iskustvo pomicanja, čineći vaše web stranice privlačnijim i ugodnijim ploviti.