Naredite svoje povezave na isti strani nekoliko prijetnejše za uporabo s tem domačim učinkom gladkega pomikanja.

Gladko drsenje je tehnika, ki se uporablja pri spletnem razvoju za ustvarjanje tekoče izkušnje drsenja za uporabnike. Izboljša navigacijo po spletni strani z animiranjem premikanja drsnika namesto privzetega nenadnega skoka.

Ta obsežen vodnik za spletne razvijalce vam bo pomagal implementirati gladko drsenje z uporabo JavaScripta.

Gladko drsenje je, ko se spletna stran gladko pomakne do želenega razdelka, namesto da bi tja takoj skočila. Zaradi tega je izkušnja drsenja bolj prijetna in brezhibna za uporabnika.

Gladko drsenje lahko izboljša uporabniško izkušnjo spletne strani na več načinov:

  • Izboljša vizualno privlačnost z odpravo nenadnih in nenadnih skokov drsenja ter doda pridih elegance.
  • Spodbuja sodelovanje uporabnikov z zagotavljanjem tekoče in brezhibne izkušnje drsenja. To pa uporabnike motivira k nadaljnjemu raziskovanju vsebine.
  • Nenazadnje gladko drsenje olajša navigacijo za uporabnike, zlasti ko imajo opravka z dolgimi spletnimi stranmi ali se premikajo med različnimi razdelki.
    instagram viewer

Če želite izvajati gladko drsenje, lahko spremenite privzeto vedenje drsenja z uporabo JavaScripta.

Struktura HTML

Najprej ustvarite potrebne označevalne elemente za različna vidna okna in navigacijo za pomikanje med njimi.

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>

Ta HTML je sestavljen iz navigacijske vrstice s tremi sidrnimi oznakami. Atribut href vsakega sidra določa enolični identifikator ciljnega odseka (npr. oddelek1, oddelek2, oddelek3). To zagotavlja, da vsaka povezava, ki jo kliknete, vodi do ustreznega ciljnega elementa.

Oblikovanje CSS

Nato uporabite nekaj CSS, da bo stran vidno privlačna in organizirana. Dodajte naslednje v 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;
}

S tem bodo povezave upodobljene kot vrsta gumbov in vsak razdelek kot element polne višine. Toda opazite, kako klik na povezavo povzroči, da brskalnik takoj skoči na ustrezen razdelek, brez animacije.

Izvedba JavaScripta

Če želite dodati gladko animacijo, ko kliknete sidrno oznako, uporabite metodo scrollIntoView(). Metoda scrollIntoView() je a vgrajena metoda JavaScript razreda Element, ki vam omogoča, da element pomaknete v vidno območje okna brskalnika.

Ko pokličete to metodo, brskalnik prilagodi položaj drsenja vsebnika elementa (kot je okno ali vsebnik, po katerem se lahko pomikate), da postane element viden.

Dodajte kodo JavaScript v script.js mapa. Začnite tako, da poslušate sprožitev dogodka DOMContentLoaded, preden naredite karkoli drugega. To zagotavlja samo povratni klic ko je DOM popolnoma naložen in je pripravljen na manipulacijo.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Nato definirajte makeLinksSmooth() funkcijo. Začnite z izbiro sidrnih oznak v navigaciji, saj boste želeli spremeniti njihovo vedenje. Nato ponovite vsako povezavo in dodajte poslušalca dogodkov za njen dogodek klika.

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

Končno definirajte smoothScroll() funkcijo, ki sprejme objekt poslušalca dogodkov. Pokličite preventDefault(), da zagotovite, da brskalnik ne izvede privzetega dejanja, ko kliknete povezavo. Nadomestila ga bo naslednja koda.

Zgrabite vrednost href trenutne sidrne oznake in jo shranite v spremenljivko. Ta vrednost mora biti ID ciljnega odseka s predpono "#", zato jo uporabite za izbiro elementa odseka prek querySelector(). Če je ciljni element prisoten, ga zaženite scrollIntoView metodo in posredujte "gladko" vedenje v parametru objekta, da dokončate učinek.

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

S tem se bo vaša dokončana spletna stran gladko pomikala do vsakega razdelka, ko kliknete povezavo:

Če želite še izboljšati izkušnjo gladkega drsenja, lahko določene vidike natančno prilagodite.

Navpični položaj drsnika lahko prilagodite z uporabo blok lastnost argumenta nastavitev. Uporabite vrednosti, kot so "start", "center" ali "end", da identificirate del ciljnega elementa, do katerega se pomaknete:

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

Dodajanje učinkov pomirjanja

Uporabite učinke sproščanja na animacijo drsenja, da ustvarite bolj naraven in vizualno privlačen prehod. Funkcije za poenostavitev, kot so poenostavitev, poenostavitev ali po meri kubične Bezierjeve krivulje lahko nadzoruje pospešek in upočasnitev gibanja drsnika. Če želite doseči enak rezultat, lahko uporabite funkcijo merjenja časa po meri z lastnostjo CSS obnašanja drsenja ali knjižnico JavaScript, kot je "smooth-scroll".

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

Zagotovite, da vaša izvedba gladkega drsenja deluje dosledno v različnih brskalnikih. Preizkusite in obravnavajte morebitne težave ali nedoslednosti, ki se lahko pojavijo v brskalniku.

Uporabite lahko spletno mesto, kot je Ali lahko uporabim za testiranje podpore brskalnika pri gradnji. Razmislite o uporabi knjižnice JavaScript ali polifilla, da zagotovite združljivost med brskalniki in brezhibno izkušnjo za vse uporabnike.

Gladko drsenje doda pridih elegance in izboljša uporabniško izkušnjo z ustvarjanjem tekočega in vizualno prijetnega drsnega učinka. Z upoštevanjem korakov, opisanih v tem priročniku, lahko spletni razvijalci implementirajo gladko drsenje z uporabo JavaScripta.

Natančna nastavitev vedenja drsenja, dodajanje učinkov olajšanja in zagotavljanje združljivosti med brskalniki bodo dodatno izboljšajte izkušnjo gladkega drsenja, zaradi česar bodo vaše spletne strani bolj privlačne in prijetne krmariti.