Padarykite savo to paties puslapio nuorodas šiek tiek malonesnes, kad galėtumėte naudoti šį įprastą sklandaus slinkimo efektą.

Sklandus slinkimas yra žiniatinklio kūrimo technika, skirta vartotojams sklandžiai slinkti. Jis pagerina naršymą tinklalapyje, nes vietoj numatytojo staigaus šuolio suaktyvina slinkties judesį.

Šis išsamus žiniatinklio kūrėjams skirtas vadovas padės sklandžiai slinkti naudojant „JavaScript“.

Sklandus slinkimas yra tada, kai tinklalapis sklandžiai slenka iki norimos skilties, o ne iškart ten peršoka. Dėl to slinkimas tampa malonesnis ir sklandesnis vartotojui.

Sklandus slinkimas gali pagerinti tinklalapio naudotojo patirtį keliais būdais:

  • Jis pagerina vizualinį patrauklumą pašalindamas staigius ir siaubingus slinkties šuolius ir suteikia elegancijos.
  • Tai skatina naudotojų įsitraukimą, nes suteikia sklandų ir vientisą slinkimo patirtį. Tai savo ruožtu skatina vartotojus toliau tyrinėti turinį.
  • Galiausiai, sklandus slinkimas palengvina naršymą naudotojams, ypač kai dirbate su ilgais tinklalapiais arba judate tarp skirtingų skyrių.
instagram viewer

Norėdami įdiegti sklandų slinkimą, galite pakeisti numatytąją slinkimo elgseną naudodami „JavaScript“.

HTML struktūra

Pirmiausia sukurkite reikiamus žymėjimo elementus skirtingoms peržiūros sritims ir naršymui, kad galėtumėte slinkti tarp jų.

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>

Šį HTML sudaro naršymo juosta, kurioje yra trys inkaro žymos. Kiekvieno prierašo atributas href nurodo unikalų tikslinės sekcijos identifikatorių (pvz., 1 sekcija, 2 sekcija, 3 sekcija). Taip užtikrinama, kad kiekviena nuoroda, kurią spustelėsite, nukreiptų į atitinkamą tikslinį elementą.

CSS stilius

Tada pritaikykite CSS, kad puslapis būtų patrauklus ir tvarkingas. Pridėkite toliau nurodytus dalykus stilius.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;
}

Taip nuorodos bus pateiktos kaip mygtukų eilutė, o kiekviena sekcija – kaip viso aukščio elementas. Tačiau atkreipkite dėmesį, kaip spustelėjus nuorodą naršyklė akimirksniu pereina į atitinkamą skyrių be animacijos.

„JavaScript“ diegimas

Kita vertus, norėdami pridėti sklandžią animaciją, kai spustelėsite inkaro žymą, naudokite metodą scrollIntoView(). ScrollIntoView() metodas yra a įtaisytas JavaScript metodas Elementų klasės, leidžiančios slinkti elementą į matomą naršyklės lango sritį.

Kai iškviečiate šį metodą, naršyklė pakoreguoja elemento sudėtinio rodinio (pvz., lango arba slenkamojo sudėtinio rodinio) slinkimo padėtį, kad elementas būtų matomas.

Pridėkite savo JavaScript kodą prie script.js failą. Pradėkite klausydami, ar suaktyvinamas DOMContentLoaded įvykis, prieš darydami ką nors kita. Tai užtikrina, kad vyks tik atgalinis skambutis kai DOM yra visiškai įkeltas ir yra pasirengęs manipuliuoti.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Toliau apibrėžkite makeLinksSmooth() funkcija. Pradėkite naršymo juostoje pasirinkdami inkaro žymas, nes norėsite pakeisti jų elgesį. Tada pakartokite kiekvieną nuorodą ir pridėkite jos paspaudimo įvykio įvykių klausytoją.

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

Galiausiai apibrėžkite smooth Scroll () funkcija, kuri paima įvykių klausytojo objektą. Iškvieskite preventDefault(), kad įsitikintumėte, jog naršyklė neatliktų numatytojo veiksmo, kai spustelėsite nuorodą. Toliau pateiktas kodas jį pakeis.

Paimkite dabartinės inkaro žymos href reikšmę ir išsaugokite ją kintamajame. Ši vertė turėtų būti tikslinės sekcijos ID su priešdėliu „#“, todėl naudokite ją norėdami pasirinkti skyriaus elementą per querySelector(). Jei yra targertElement, paleiskite jį slinkite į rodinį metodą ir perduoti „sklandų“ elgesį objekto parametre, kad užbaigtumėte efektą.

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

Tada jūsų baigtas tinklalapis sklandžiai slinks į kiekvieną skyrių, kai spustelėsite nuorodą:

Norėdami dar labiau pagerinti sklandų slinkimo patirtį, galite tiksliai sureguliuoti tam tikrus aspektus.

Galite reguliuoti vertikalią slinkties padėtį naudodami blokas parametrų argumento savybė. Naudokite tokias reikšmes kaip „pradžia“, „centras“ arba „pabaiga“, kad nustatytumėte tikslinio elemento dalį, į kurią reikia slinkti:

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

Lengvinamųjų efektų pridėjimas

Taikykite lengvinimo efektus slinkimo animacijai, kad sukurtumėte natūralesnį ir vizualiai patrauklesnį perėjimą. Lengvinimo funkcijos, pvz., palengvinimas, palengvinimas arba pritaikymas kubinės-bezierio kreivės gali valdyti slinkties judesio pagreitį ir lėtėjimą. Norėdami pasiekti tą patį rezultatą, galite naudoti pasirinktinę laiko nustatymo funkciją su slinkties veikimo CSS ypatybe arba „JavaScript“ biblioteka, pvz., „sklandus slinkimas“.

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

Užtikrinkite, kad sklandus slinkimo diegimas veiktų nuosekliai įvairiose naršyklėse. Išbandykite ir tvarkykite bet kokius su naršykle susijusius keistenumus ar neatitikimus, kurie gali kilti.

Galite naudoti tokią svetainę kaip Ar galiu naudoti išbandyti naršyklės palaikymą kuriant. Apsvarstykite galimybę naudoti „JavaScript“ biblioteką arba daugialypį užpildymą, kad užtikrintumėte kelių naršyklių suderinamumą ir sklandų naudojimą visiems naudotojams.

Sklandus slinkimas suteikia elegancijos ir pagerina vartotojo patirtį sukuriant sklandų ir vizualiai malonų slinkimo efektą. Vykdydami šiame vadove nurodytus veiksmus, žiniatinklio kūrėjai gali įdiegti sklandų slinkimą naudodami „JavaScript“.

Tikslus slinkimo elgsenos sureguliavimas, palengvinimo efektų pridėjimas ir kelių naršyklių suderinamumo užtikrinimas dar labiau pagerinkite sklandų slinkimą, kad jūsų tinklalapiai būtų patrauklesni ir malonesni Rodyti kelią.