Tee saman sivun linkeistäsi hieman mukavampaa käyttää tällä alkuperäisellä tasaisesti vierittävällä tehosteella.

Smooth scrolling on tekniikka, jota käytetään verkkokehityksessä luomaan käyttäjille sujuva vierityskokemus. Se parantaa navigointia verkkosivulla animoimalla vieritysliikettä oletusarvoisen äkillisen hypyn sijaan.

Tämä kattava opas verkkokehittäjille auttaa sinua toteuttamaan sujuvan vierityksen JavaScriptin avulla.

Tasainen vieritys on, kun verkkosivu vierittää sujuvasti haluttuun osioon sen sijaan, että se hyppää sinne välittömästi. Tämä tekee vierityskokemuksesta miellyttävämmän ja saumattomamman käyttäjälle.

Tasainen vieritys voi parantaa verkkosivun käyttökokemusta useilla tavoilla:

  • Se parantaa visuaalista vetovoimaa eliminoimalla äkilliset ja ärsyttävät vierityshypyt ja lisäämällä ripauksen eleganssia.
  • Se kannustaa käyttäjää sitoutumaan tarjoamalla sujuvan ja saumattoman vierityskokemuksen. Tämä puolestaan ​​motivoi käyttäjiä tutkimaan sisältöä tarkemmin.
  • Lopuksi sujuva vieritys helpottaa käyttäjien navigointia, etenkin kun käsitellään pitkiä verkkosivuja tai siirrytään eri osioiden välillä.

Sujuvan vierityksen toteuttamiseksi voit muokata oletusarvoista vierityskäyttäytymistä JavaScriptin avulla.

HTML-rakenne

Luo ensin tarvittavat merkintäelementit eri näyttöportteihin ja navigointiin niiden välillä selaamista varten.

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>

Tämä HTML koostuu navigointipalkista, jossa on kolme ankkuritunnistetta. Kunkin ankkurin href-attribuutti määrittää kohdeosion yksilöllisen tunnisteen (esim. osio1, jakso2, jakso3). Tämä varmistaa, että jokainen napsautamasi linkki siirtyy vastaavaan kohdeelementtiin.

CSS-tyyli

Käytä seuraavaksi CSS: ää tehdäksesi sivusta näkyvästi houkuttelevan ja järjestetyn. Lisää seuraavaan tyyli.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ä tekee linkit painikeriviksi ja jokainen osa täyskorkeaksi elementiksi. Huomaa kuitenkin, kuinka linkin napsauttaminen saa selaimen siirtymään välittömästi vastaavaan osioon ilman animaatiota.

JavaScriptin toteutus

Jos haluat lisätä sujuvan animaation, kun napsautat ankkuritunnistetta, käytä scrollIntoView()-menetelmää. ScrollIntoView()-menetelmä on a sisäänrakennettu JavaScript-menetelmä Element-luokasta, jonka avulla voit vierittää elementin selainikkunan näkyvälle alueelle.

Kun kutsut tätä menetelmää, selain säätää elementin säilön (kuten ikkunan tai vieritettävän säilön) vierityskohtaa, jotta elementti tulee näkyviin.

Lisää JavaScript-koodisi script.js tiedosto. Aloita kuuntelemalla DOMContentLoaded-tapahtuman käynnistymistä, ennen kuin teet mitään muuta. Tämä varmistaa, että vain takaisinsoitto toimii kun DOM on ladattu täyteen ja on valmis manipuloimaan.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Määritä seuraavaksi makeLinksSmooth() toiminto. Aloita valitsemalla ankkuritunnisteet navigaatiosta, koska haluat muokata niiden toimintaa. Toista sitten jokaisen linkin yli ja lisää tapahtumaseurain sen napsautustapahtumalle.

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

Lopuksi määrittele smoothscroll() toiminto, joka ottaa tapahtumanseurantaobjektin. Kutsu preventDefault() varmistaaksesi, että selain ei suorita oletustoimintoaan, kun napsautat linkkiä. Seuraava koodi korvaa sen.

Tartu nykyisen ankkuritunnisteen href-arvoon ja tallenna se muuttujaan. Tämän arvon tulee olla kohdeosion tunnus, jossa on etuliite "#", joten käytä sitä osion elementin valitsemiseen querySelector(). Jos targertElement on läsnä, suorita se vieritä Näytä -menetelmää ja välitä "sileä" käyttäytyminen objektiparametrissa tehosteen viimeistelemiseksi.

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

Tämän ansiosta valmis verkkosivusi vierittää sujuvasti jokaiseen osioon, kun napsautat linkkiä:

Voit parantaa sujuvaa vierityskokemusta entisestään hienosäätämällä tiettyjä ominaisuuksia.

Voit säätää rullan pystysuoraa sijaintia käyttämällä lohko asetusargumentin ominaisuus. Käytä arvoja, kuten "alku", "keskus" tai "loppu", tunnistaaksesi kohdeelementin osa, johon selaa:

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

Helpottavien tehosteiden lisääminen

Käytä vieritysanimaatioon helpottavia tehosteita luodaksesi luonnollisemman ja visuaalisesti houkuttelevamman siirtymän. Helpotustoiminnot, kuten helpottaminen, helpotus tai mukautettu kuutio-bezier-käyrät voi ohjata vieritysliikkeen kiihtyvyyttä ja hidastuvuutta. Voit käyttää mukautettua ajoitustoimintoa scroll-behavior CSS -ominaisuuden tai JavaScript-kirjaston, kuten "smooth-scroll", kanssa saman tuloksen saavuttamiseksi.

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

Varmista, että sujuva vieritys toimii johdonmukaisesti eri selaimissa. Testaa ja käsittele mahdollisia selainkohtaisia ​​omituisuuksia tai epäjohdonmukaisuuksia.

Voit käyttää verkkosivustoa, kuten Voinko käyttää testata selaimen tukea rakennuksen aikana. Harkitse JavaScript-kirjaston tai monitäytteen käyttöä varmistaaksesi eri selainten yhteensopivuuden ja tarjotaksesi saumattoman käyttökokemuksen kaikille käyttäjille.

Tasainen vieritys lisää ripauksen eleganssia ja parantaa käyttökokemusta luomalla sujuvan ja visuaalisesti miellyttävän vieritysefektin. Noudattamalla tässä oppaassa kuvattuja vaiheita verkkokehittäjät voivat toteuttaa sujuvan vierityksen JavaScriptin avulla.

Vierityskäyttäytymisen hienosäätö, helpottavien tehosteiden lisääminen ja selainten välisen yhteensopivuuden varmistaminen Paranna sujuvaa vierityskokemusta entisestään, mikä tekee verkkosivuistasi kiinnostavampia ja nautittavampia navigoida.