Ezzel a natív sima görgetőeffektussal kissé szebbé teheti az azonos oldalra mutató hivatkozásokat.

A sima görgetés egy olyan technika, amelyet a webfejlesztésben használnak, hogy gördülékeny görgetést biztosítsanak a felhasználók számára. Javítja a weboldalon belüli navigációt azáltal, hogy animálja a görgető mozgást az alapértelmezett hirtelen ugrás helyett.

Ez a webfejlesztőknek szóló átfogó útmutató segít a JavaScript használatával zökkenőmentes görgetés megvalósításában.

A sima görgetés az, amikor egy weboldal simán görgeti a kívánt szakaszt, ahelyett, hogy azonnal odaugrana. Ez kellemesebbé és gördülékenyebbé teszi a görgetést a felhasználó számára.

A sima görgetés számos módon javíthatja a weboldal felhasználói élményét:

  • Fokozza a vizuális vonzerőt azáltal, hogy kiküszöböli a hirtelen és megrázó görgetési ugrásokat, és egy csipetnyi eleganciát ad hozzá.
  • Folyékony és zökkenőmentes görgetési élményt biztosítva ösztönzi a felhasználók elkötelezettségét. Ez viszont motiválja a felhasználókat a tartalom további felfedezésére.
    • instagram viewer
  • Végül, a sima görgetés megkönnyíti a navigációt a felhasználók számára, különösen akkor, ha hosszú weboldalakkal foglalkoznak, vagy a különböző szakaszok között mozognak.

A sima görgetés megvalósításához módosíthatja az alapértelmezett görgetési viselkedést JavaScript használatával.

HTML szerkezet

Először hozza létre a szükséges jelölőelemeket a különböző nézetablakhoz és a navigációhoz a közöttük való görgetéshez.

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>

Ez a HTML egy navigációs sávból áll, amely három horgonycímkét tartalmaz. Az egyes horgonyok href attribútuma határozza meg a célszakasz egyedi azonosítóját (pl. 1. szakasz, 2. szakasz, 3. szakasz). Ez biztosítja, hogy minden hivatkozás, amelyre rákattint, a megfelelő célelemhez navigáljon.

CSS stílus

Ezután alkalmazzon némi CSS-t, hogy az oldal láthatóan vonzó és rendezett legyen. Adja hozzá a következőket stílus.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;
}

Ez a hivatkozásokat gombsorként, az egyes szakaszokat pedig teljes magasságú elemként jeleníti meg. De figyelje meg, hogy egy hivatkozásra kattintva a böngésző azonnal a megfelelő szakaszra ugrik, animáció nélkül.

JavaScript implementáció

Más esetekben, ha egy horgonycímkére kattint, sima animációt szeretne hozzáadni, használja a scrollIntoView() metódust. A scrollIntoView() metódus a beépített JavaScript metódus az Element osztályból, amely lehetővé teszi egy elem görgetését a böngészőablak látható területére.

A metódus meghívásakor a böngésző beállítja az elem tárolójának görgetési pozícióját (például az ablak vagy egy görgethető tároló), hogy az elem látható legyen.

Adja hozzá JavaScript kódját a script.js fájlt. Kezdje azzal, hogy figyelje a DOMContentLoaded esemény aktiválását, mielőtt bármi mást tenne. Ez biztosítja, hogy csak a visszahívás fut amikor a DOM teljesen be van töltve és kész manipulálni.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Ezután határozza meg a makeLinksSmooth() funkció. Kezdje a horgonycímkék kiválasztásával a navigációban, mivel módosítani szeretné a viselkedésüket. Ezután ismételje meg az egyes hivatkozásokat, és adjon hozzá egy eseményfigyelőt a kattintási eseményhez.

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

Végül határozza meg a smoothScroll() függvény, amely egy eseményfigyelő objektumot vesz fel. Hívja a preventDefault() függvényt annak biztosítására, hogy a böngésző ne az alapértelmezett műveletet hajtsa végre, amikor rákattint a hivatkozásra. A következő kód váltja fel.

Fogja meg az aktuális horgonycímke href értékét, és tárolja egy változóban. Ennek az értéknek a célszakasz azonosítójának kell lennie, "#" előtaggal, ezért használja a szakasz elemének kiválasztásához querySelector(). Ha a targertElement jelen van, futtassa azt görgessen a nézetbe módszert, és adja át a "sima" viselkedést egy objektumparaméterben a hatás befejezéséhez.

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

Ezzel a kész weboldal simán gördül az egyes szakaszokhoz, ha rákattint egy linkre:

A sima görgetés élményének további javítása érdekében finomhangolhat bizonyos szempontokat.

A görgető függőleges helyzetét a gombbal állíthatja be Blokk a beállítások argumentum tulajdonsága. Használjon olyan értékeket, mint a "start", "center" vagy "end", hogy azonosítsa a célelem azon részét, amelyre görgetni kell:

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

Könnyítő hatások hozzáadása

Alkalmazzon könnyítő effektusokat a görgető animációra, hogy természetesebb és tetszetősebb átmenetet hozzon létre. Könnyítési funkciók, mint például az egyszerűsítés, az egyszerűsítés vagy az egyéni köbös-bezier görbék szabályozhatja a görgető mozgás gyorsulását és lassítását. Ugyanezen eredmény eléréséhez használhat egyéni időzítési függvényt a scroll-behavior CSS tulajdonsággal vagy JavaScript-könyvtárral, például a "sima görgetéssel".

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

Gondoskodjon arról, hogy a görgetős megvalósítás konzisztensen működjön a különböző böngészőkben. Tesztelje és kezelje az esetlegesen felmerülő böngésző-specifikus furcsaságokat vagy következetlenségeket.

Használhat olyan webhelyet, mint a Használhatom hogy tesztelje a böngésző támogatását az építés során. Fontolja meg JavaScript-könyvtár vagy többkitöltés használatát, hogy biztosítsa a böngészők közötti kompatibilitást, és zökkenőmentes élményt biztosítson minden felhasználó számára.

A sima görgetés egy csipetnyi eleganciát ad, és fokozza a felhasználói élményt azáltal, hogy folyékony és vizuálisan tetszetős görgetési hatást hoz létre. Az ebben az útmutatóban ismertetett lépések követésével a webfejlesztők zökkenőmentes görgetést valósíthatnak meg JavaScript használatával.

A görgetési viselkedés finomhangolása, könnyítő hatások hozzáadása és a böngészők közötti kompatibilitás biztosítása tovább fokozza a gördülékeny görgetés élményét, így weboldalai vonzóbbá és élvezetesebbé válnak hajózik.