Pomocou tohto natívneho efektu plynulého posúvania urobte o niečo príjemnejšie odkazy na rovnakú stránku.

Plynulé posúvanie je technika používaná pri vývoji webu na vytvorenie plynulého posúvania pre používateľov. Zlepšuje navigáciu v rámci webovej stránky animáciou posúvania namiesto predvoleného prudkého skoku.

Táto komplexná príručka pre vývojárov webu vám pomôže implementovať plynulé posúvanie pomocou JavaScriptu.

Plynulé posúvanie je, keď sa webová stránka plynulo posúva do požadovanej sekcie, namiesto toho, aby tam okamžite skočila. Vďaka tomu je posúvanie pre používateľa príjemnejšie a bezproblémové.

Plynulé posúvanie môže zlepšiť používateľský zážitok z webovej stránky niekoľkými spôsobmi:

  • Zlepšuje vizuálnu príťažlivosť tým, že eliminuje prudké a prudké skoky v rolovaní, čím dodáva nádych elegancie.
  • Podporuje zapojenie používateľov tým, že poskytuje plynulé a plynulé posúvanie. To zase motivuje používateľov k ďalšiemu skúmaniu obsahu.
  • A napokon, plynulé posúvanie uľahčuje používateľom navigáciu, najmä pri práci s dlhými webovými stránkami alebo pri pohybe medzi rôznymi sekciami.
    instagram viewer

Ak chcete implementovať plynulé posúvanie, môžete upraviť predvolené správanie posúvania pomocou JavaScriptu.

Štruktúra HTML

Najprv vytvorte potrebné prvky značiek pre rôzne výrezy a navigáciu, aby ste medzi nimi mohli prechádzať.

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 kód HTML pozostáva z navigačnej lišty s tromi kotviacimi značkami. Atribút href každej kotvy určuje jedinečný identifikátor cieľovej sekcie (napr. sekcia1, sekcia2, sekcia3). Tým sa zabezpečí, že každý odkaz, na ktorý kliknete, prejde na príslušný cieľový prvok.

CSS štýl

Potom použite nejaký štýl CSS, aby bola stránka viditeľne príťažlivá a usporiadaná. Pridajte nasledujúce do style.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 sa odkazy vykreslia ako rad tlačidiel a každá sekcia ako prvok plnej výšky. Všimnite si však, ako kliknutie na odkaz spôsobí, že prehliadač okamžite preskočí na príslušnú sekciu bez animácie.

Implementácia JavaScriptu

Ak chcete pridať hladkú animáciu po kliknutí na značku ukotvenia, použite metódu scrollIntoView(). Metóda scrollIntoView() je a vstavaná metóda JavaScript triedy Element, ktorá vám umožňuje posúvať prvok do viditeľnej oblasti okna prehliadača.

Keď zavoláte túto metódu, prehliadač upraví pozíciu posúvania kontajnera prvku (ako je okno alebo posúvateľný kontajner), aby bol prvok viditeľný.

Pridajte svoj JavaScript kód do script.js súbor. Začnite počúvaním udalosti DOMContentLoaded, aby sa spustila predtým, ako urobíte čokoľvek iné. Tým sa zabezpečí, že bude prebiehať iba spätné volanie keď je DOM plne načítaný a je pripravený na manipuláciu.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Ďalej definujte makeLinksSmooth() funkciu. Začnite výberom kotviacich značiek v navigácii, pretože budete chcieť upraviť ich správanie. Potom opakujte každý odkaz a pridajte prijímač udalosti pre udalosť kliknutia.

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

Nakoniec definujte smoothScroll() funkcia, ktorá preberá objekt poslucháča udalostí. Zavolajte preventDefault(), aby ste sa uistili, že prehliadač po kliknutí na odkaz nevykoná svoju predvolenú akciu. Nahradí ho nasledujúci kód.

Získajte hodnotu href aktuálnej značky ukotvenia a uložte ju do premennej. Táto hodnota by mala byť ID cieľovej sekcie s predponou "#", takže ju použite na výber prvku sekcie cez querySelector(). Ak je prítomný targertElement, spustite ho scrollIntoView a odovzdať "hladké" správanie v parametri objektu na dokončenie efektu.

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

Vďaka tomu sa vaša hotová webová stránka po kliknutí na odkaz plynulo posunie do každej sekcie:

Ak chcete ešte viac vylepšiť zážitok z plynulého posúvania, môžete doladiť určité aspekty.

Vertikálnu polohu rolovania môžete upraviť pomocou blokovať vlastnosť argumentu nastavení. Použite hodnoty ako „start“, „center“ alebo „end“ na identifikáciu časti cieľového prvku, na ktorú chcete prejsť:

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

Pridanie Easing Effects

Aplikujte efekty easing na rolovaciu animáciu, aby ste vytvorili prirodzenejší a vizuálne príťažlivejší prechod. Uľahčujúce funkcie, ako je jednoduché zapnutie, uvoľnenie alebo prispôsobenie kubické-bezierove krivky môže ovládať zrýchlenie a spomalenie rolovacieho pohybu. Na dosiahnutie rovnakého výsledku môžete použiť vlastnú funkciu časovania s vlastnosťou CSS správania rolovania alebo knižnicu JavaScript, ako je napríklad „hladké posúvanie“.

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

Uistite sa, že vaša implementácia hladkého posúvania funguje konzistentne v rôznych prehliadačoch. Testujte a riešte všetky zvláštnosti alebo nezrovnalosti špecifické pre prehliadač, ktoré sa môžu vyskytnúť.

Môžete použiť webovú stránku napr Môžem použiť na testovanie podpory prehliadača pri zostavovaní. Zvážte použitie knižnice JavaScript alebo polyfill, aby ste zaistili kompatibilitu medzi prehliadačmi a poskytli bezproblémovú skúsenosť pre všetkých používateľov.

Plynulé posúvanie dodáva nádych elegancie a zlepšuje používateľský zážitok vytvorením plynulého a vizuálne príjemného efektu posúvania. Podľa krokov uvedených v tejto príručke môžu weboví vývojári implementovať plynulé posúvanie pomocou JavaScriptu.

Jemné doladenie správania pri posúvaní, pridanie efektov uľahčenia a zabezpečenie kompatibility medzi prehliadačmi ďalej vylepšite plynulé posúvanie, vďaka čomu budú vaše webové stránky pútavejšie a zábavnejšie navigovať.