Plynulé posouvání je technika používaná při vývoji webu k vytvoření plynulého posouvání pro uživatele. Vylepšuje navigaci na webové stránce tím, že animuje pohyb posouvání namísto výchozího náhlého skoku.
Tento komplexní průvodce pro webové vývojáře vám pomůže implementovat plynulé posouvání pomocí JavaScriptu.
Plynulé posouvání je, když se webová stránka plynule posune do požadované sekce, místo aby tam okamžitě skočila. Díky tomu je posouvání pro uživatele příjemnější a bezproblémové.
Table of Contents
Výhody hladkého rolování
Plynulé posouvání může zlepšit uživatelský dojem z webové stránky několika způsoby:
- Zvyšuje vizuální přitažlivost tím, že eliminuje náhlé a otřesné skoky posouvání a dodává nádech elegance.
- Podporuje zapojení uživatelů tím, že poskytuje plynulé a plynulé posouvání. To zase motivuje uživatele k dalšímu zkoumání obsahu.
- A konečně, plynulé posouvání usnadňuje uživatelům navigaci, zejména při práci s dlouhými webovými stránkami nebo při pohybu mezi různými sekcemi.
Chcete-li implementovat plynulé posouvání, můžete upravit výchozí chování posouvání pomocí JavaScriptu.
Struktura HTML
Nejprve vytvořte nezbytné značkovací prvky pro různé výřezy a navigaci pro procházení mezi nimi.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://wilku.top/a-guide-for-web-developers/./style.css" />
<title>Smooth Scrolling Guide for Web Developers</title>
</head><body>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav><section id="section1">
<h2>Section 1</h2>
</section><section id="section2">
<h2>Section 2</h2>
</section><section id="section3">
<h2>Section 3</h2>
</section><script src="https://wilku.top/a-guide-for-web-developers/./script.js"></script>
</body></html>
Tento HTML se skládá z navigační lišty obsahující tři kotvící značky. Atribut href každé kotvy určuje jedinečný identifikátor cílové sekce (např. sekce1, sekce2, sekce3). To zajistí, že každý odkaz, na který kliknete, přejde na odpovídající cílový prvek.
Stylování CSS
Dále použijte nějaké CSS, aby byla stránka viditelně přitažlivá a organizovaná. Přidejte do style.css následující:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
nav {
background: #fff;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}
nav ul {
display: flex;
gap: 10px;
justify-content: center;
}
nav ul li {
list-style: none;
}
nav ul li a {
border-radius: 5px;
border: 1.5px solid #909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Tím se odkazy vykreslí jako řada tlačítek a každá sekce jako prvek s plnou výškou. Všimněte si ale, jak kliknutí na odkaz způsobí, že prohlížeč okamžitě přeskočí na odpovídající sekci bez animace.
Implementace JavaScriptu
Chcete-li přidat hladkou animaci, když kliknete na značku ukotvení, použijte metodu scrollIntoView(). Metoda scrollIntoView() je vestavěná metoda JavaScriptu třídy Element, která umožňuje posouvat prvek do viditelné oblasti okna prohlížeče.
Když zavoláte tuto metodu, prohlížeč upraví pozici posouvání kontejneru prvku (jako je okno nebo rolovací kontejner), aby byl prvek viditelný.
Přidejte svůj kód JavaScript do souboru script.js. Začněte poslechem události DOMContentLoaded, než se spustí, než uděláte cokoliv jiného. Tím je zajištěno, že zpětné volání běží pouze tehdy, když je DOM plně načten a je připraven k manipulaci.
document.addEventListener("DOMContentLoaded", makeLinksSmooth);
Dále definujte funkci makeLinksSmooth(). Začněte výběrem kotevních značek v navigaci, protože budete chtít upravit jejich chování. Potom iterujte přes každý odkaz a přidejte posluchač události pro jeho událost kliknutí.
function makeLinksSmooth() {
const navLinks = document.querySelectorAll("nav a"); navLinks.forEach((link) => {
link.addEventListener("click", smoothScroll);
});
}
Nakonec definujte funkci smoothScroll(), která převezme objekt posluchače události. Zavolejte preventDefault(), abyste zajistili, že prohlížeč po kliknutí na odkaz neprovede svou výchozí akci. Následující kód jej nahradí.
Vezměte hodnotu href aktuální značky kotvy a uložte ji do proměnné. Tato hodnota by měla být ID cílové sekce s předponou „#“, takže ji použijte k výběru prvku sekce pomocí querySelector(). Pokud je přítomen targertElement, spusťte jeho metodu scrollIntoView a předejte „hladké“ chování v parametru objektu, abyste dokončili efekt.
function smoothScroll(e) {
e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId); if (targetElement) {
targetElement.scrollIntoView({ behavior: "smooth", });
}
}
Díky tomu se vaše dokončená webová stránka bude hladce posouvat do každé sekce, když kliknete na odkaz:
Chcete-li ještě více vylepšit zážitek z plynulého posouvání, můžete doladit určité aspekty.
Úprava pozice posouvání
Vertikální polohu posouvání můžete upravit pomocí vlastnosti block argumentu nastavení. Použijte hodnoty jako „start“, „center“ nebo „end“ k identifikaci části cílového prvku, na kterou chcete přejít:
targetElement.scrollIntoView({ behavior: "smooth", block: "end" });
Přidání Easing Effects
Aplikujte efekty náběhu/doběhu na animaci posouvání, abyste vytvořili přirozenější a vizuálně přitažlivější přechod. Funkce usnadnění, jako je náběh, náběh nebo vlastní kubické-bezierovy křivky, mohou ovládat zrychlení a zpomalení rolovacího pohybu. K dosažení stejného výsledku můžete použít vlastní funkci časování s vlastností CSS chování posouvání nebo s knihovnou JavaScriptu, jako je „hladké posouvání“.
html {
scroll-behavior: smooth;
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}
Zajistěte, aby vaše implementace hladkého posouvání fungovala konzistentně v různých prohlížečích. Testujte a řešte jakékoli zvláštnosti nebo nesrovnalosti specifické pro prohlížeč, které mohou nastat.
Můžete použít webovou stránku jako Mohu použít otestovat podporu prohlížeče při sestavování. Zvažte použití knihovny JavaScript nebo polyfill, abyste zajistili kompatibilitu mezi prohlížeči a zajistili bezproblémové používání pro všechny uživatele.
Plynulé posouvání dodává nádech elegance a zlepšuje uživatelský zážitek vytvořením plynulého a vizuálně příjemného efektu posouvání. Podle kroků uvedených v této příručce mohou weboví vývojáři implementovat plynulé posouvání pomocí JavaScriptu.
Jemné vyladění chování při posouvání, přidání efektů zmírnění a zajištění kompatibility mezi prohlížeči dále vylepší plynulé posouvání, díky čemuž budou vaše webové stránky poutavější a zábavnější při navigaci.