Pomocí tohoto nativního efektu plynulého posouvání udělejte své odkazy na stejné stránce o něco příjemnější.

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é.

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.
instagram viewer

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.

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>

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 následující do styl.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í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 a 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 JavaScript kód do script.js soubor. Začněte poslechem události DOMContentLoaded, než se spustí, než uděláte cokoliv jiného. Tím je zajištěno pouze spuštění zpětného volání když je DOM plně načten a je připraven k manipulaci.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Dále definujte makeLinksSmooth() funkce. 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í.

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

Nakonec definujte smoothScroll() funkce, která přebírá 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 jej scrollIntoView a předat "hladké" chování v parametru objektu pro dokončení efektu.

functionsmoothScroll(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.

Vertikální polohu rolování můžete upravit pomocí blok vlastnost argumentu nastavení. Pomocí hodnot jako „start“, „center“ nebo „end“ identifikujte část 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í nastavení kubické-bezierovy křivky může 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 knihovnu JavaScriptu, jako je „hladké posouvání“.

/* CSS to apply easing effect */
html {
scroll-behavior: smooth;
/* Custom cubic-bezier easing */
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 různými prohlížeči a zajistili bezproblémové používání pro všechny uživatele.

Plynulé posouvání dodává nádech elegance a vylepšuje uživatelský zážitek tím, že vytváří plynulý a vizuálně příjemný efekt posouvání. Podle kroků uvedených v této příručce mohou weboví vývojáři implementovat plynulé posouvání pomocí JavaScriptu.

Jemné doladění chování při posouvání, přidání efektů usnadnění a zajištění kompatibility mezi prohlížeči dále vylepšuje plynulé posouvání, díky čemuž budou vaše webové stránky poutavější a zábavnější navigovat.