Muutke oma sama lehe lingid selle loomuliku sujuva kerimise efektiga kasutamiseks pisut kenamaks.

Sujuv kerimine on veebiarenduses kasutatav tehnika kasutajatele sujuva kerimise kogemuse loomiseks. See täiustab veebilehel navigeerimist, animeerides vaikimisi järsu hüppe asemel kerimisliikumist.

See põhjalik veebiarendajatele mõeldud juhend aitab teil JavaScripti abil sujuvat kerimist rakendada.

Sujuv kerimine on siis, kui veebileht kerib sujuvalt soovitud jaotiseni, selle asemel, et sinna kohe hüpata. See muudab kerimise kasutaja jaoks meeldivamaks ja sujuvamaks.

Sujuv kerimine võib parandada veebilehe kasutuskogemust mitmel viisil.

  • See suurendab visuaalset atraktiivsust, välistades järsud ja järsud kerimishüpped, lisades elegantsi.
  • See soodustab kasutajate seotust, pakkudes sujuvat ja sujuvat kerimiskogemust. See omakorda motiveerib kasutajaid sisu edasi uurima.
  • Lõpuks muudab sujuv kerimine kasutajatele navigeerimise lihtsamaks, eriti kui tegemist on pikkade veebilehtedega või liigub erinevate jaotiste vahel.
instagram viewer

Sujuva kerimise rakendamiseks saate JavaScripti abil kerimise vaikekäitumist muuta.

HTML-i struktuur

Esmalt loo erinevate vaateavade jaoks vajalikud märgistuselemendid ja nende vahel kerimiseks navigeerimine.

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>

See HTML koosneb navigeerimisribast, millel on kolm ankursilti. Iga ankru atribuut href määrab sihtsektsiooni kordumatu identifikaatori (nt jaotis1, jaotis2, jaotis3). See tagab, et iga link, millel klõpsate, liigub vastava sihtelemendi juurde.

CSS-stiil

Järgmisena rakendage CSS-i, et muuta leht nähtavalt atraktiivseks ja organiseeritud. Lisage järgmine stiil.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;
}

See muudab lingid nupureana ja iga jaotise täiskõrguse elemendina. Kuid pange tähele, kuidas lingil klõpsates liigub brauser koheselt vastavasse jaotisesse ilma animatsioonita.

JavaScripti rakendamine

Muus osas kasutage ankrusildil klõpsamisel sujuva animatsiooni lisamiseks meetodit scrollIntoView(). ScrollIntoView() meetod on a sisseehitatud JavaScripti meetod klassist Element, mis võimaldab kerida elemendi brauseriakna nähtavale alale.

Selle meetodi kutsumisel kohandab brauser elemendi ümbrise (nt akna või keritava konteineri) kerimisasendit, et element oleks nähtav.

Lisage oma JavaScripti kood script.js faili. Alustuseks kuulake, kas DOMContentLoaded sündmus käivitub, enne kui midagi muud teete. See tagab, et ainult tagasihelistamine töötab kui DOM on täielikult laetud ja on valmis manipuleerima.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Järgmisena määratlege makeLinksSmooth() funktsiooni. Alustuseks valige navigeerimisribal ankurmärgendid, kuna soovite nende käitumist muuta. Seejärel korrake iga linki ja lisage selle klikisündmusele sündmusekuulaja.

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

Lõpuks määratlege smoothscroll() funktsioon, mis võtab sündmusekuulaja objekti. Kutsuge preventDefault() tagamaks, et brauser ei teeks lingil klõpsamisel vaiketoimingut. Selle asendab järgmine kood.

Haarake praeguse ankrusildi href väärtus ja salvestage see muutujasse. See väärtus peaks olema sihtjaotise ID koos eesliitega "#", nii et kasutage seda jaotise elemendi valimiseks querySelector(). Kui targertElement on olemas, käivitage see kerige vaatesse meetodit ja edastage efekti lõpuleviimiseks objektiparameetris "sujuv" käitumine.

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

Sellega keritakse teie valmis veebileht sujuvalt iga jaotiseni, kui klõpsate lingil:

Sujuva kerimise täiustamiseks saate teatud aspekte täpsustada.

Kerimise vertikaalset asendit saate reguleerida, kasutades nuppu blokk seadete argumendi omadus. Kasutage selliseid väärtusi nagu "start", "center" või "end", et tuvastada sihtelemendi osa, kuhu kerida.

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

Kergendavate efektide lisamine

Kasutage kerimisanimatsioonile kergendavaid efekte, et luua loomulikum ja visuaalselt atraktiivsem üleminek. Lihtsustusfunktsioonid, nagu sisse-, välja- või kohandamisfunktsioonid kuupmeetri-bezieri kõverad saab juhtida kerimisliigutuse kiirendust ja aeglustumist. Sama tulemuse saavutamiseks saate kasutada kohandatud ajastusfunktsiooni koos kerimiskäitumise CSS-i atribuudiga või JavaScripti teegiga (nt sujuv kerimine).

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

Veenduge, et teie sujuv kerimine töötaks järjepidevalt erinevates brauserites. Testige ja käsitlege brauserispetsiifilisi veidrusi või ebakõlasid, mis võivad tekkida.

Võite kasutada veebisaiti nagu Kas ma võin kasutada et testida loomisel brauseri tuge. Kaaluge JavaScripti teegi või polüfilli kasutamist, et tagada brauseriülene ühilduvus ja pakkuda kõigile kasutajatele sujuvat kasutuskogemust.

Sujuv kerimine lisab elegantsi ja täiustab kasutajakogemust, luues sujuva ja visuaalselt meeldiva kerimisefekti. Järgides selles juhendis kirjeldatud samme, saavad veebiarendajad JavaScripti abil sujuvalt kerida.

Kerimiskäitumise peenhäälestamine, kergendavate efektide lisamine ja brauseritevahelise ühilduvuse tagamine täiustage sujuvat kerimiskogemust veelgi, muutes teie veebilehed köitvamaks ja nauditavamaks navigeerida.