Gør dine links på samme side lidt bedre at bruge med denne indbyggede glatte rullende effekt.

Glat rulning er en teknik, der bruges i webudvikling til at skabe en flydende rulningsoplevelse for brugerne. Det forbedrer navigationen på en webside ved at animere rullebevægelsen i stedet for standard-abrupte spring.

Denne omfattende guide til webudviklere hjælper dig med at implementere jævn rulning ved hjælp af JavaScript.

Glat rulning er, når en webside ruller jævnt til den ønskede sektion, i stedet for at hoppe dertil med det samme. Dette gør rulleoplevelsen mere behagelig og problemfri for brugeren.

Jævn rulning kan forbedre brugeroplevelsen af ​​en webside på flere måder:

  • Det forbedrer den visuelle tiltrækningskraft ved at eliminere bratte og rystende scroll-spring og tilføjer et strejf af elegance.
  • Det tilskynder brugerengagement ved at give en flydende og problemfri rulleoplevelse. Dette motiverer igen brugerne til at udforske indholdet yderligere.
  • Endelig gør jævn rulning navigation lettere for brugerne, især når de har at gøre med lange websider eller flytter mellem forskellige sektioner.
    instagram viewer

For at implementere jævn rulning kan du ændre standard rulningsadfærd ved hjælp af JavaScript.

HTML struktur

Først skal du oprette de nødvendige markup-elementer til de forskellige visningsporte og navigationen for at rulle mellem dem.

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>

Denne HTML består af en navigationslinje med tre anker-tags. Href-attributten for hvert anker angiver målsektionens unikke identifikator (f.eks. sektion1, sektion2, sektion3). Dette sikrer, at hvert link, du klikker på, navigerer til det tilsvarende målelement.

CSS Styling

Anvend derefter noget CSS for at gøre siden synligt tiltalende og organiseret. Tilføj følgende til 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;
}

Dette vil gengive linkene som en række af knapper og hver sektion som et element i fuld højde. Men bemærk, hvordan et klik på et link får browseren til øjeblikkeligt at hoppe til den tilsvarende sektion uden animation.

JavaScript implementering

For at tilføje en jævn animation, når du klikker på et anker-tag, skal du bruge scrollIntoView()-metoden. ScrollIntoView()-metoden er en indbygget JavaScript-metode af Element-klassen, der giver dig mulighed for at rulle et element ind i det synlige område af browservinduet.

Når du kalder denne metode, justerer browseren rullepositionen af ​​elementets beholder (såsom vinduet eller en rullebar beholder) for at gøre elementet synligt.

Tilføj din JavaScript-kode til script.js fil. Start med at lytte efter, at DOMContentLoaded-begivenheden udløses, før du gør noget andet. Dette sikrer, at tilbagekaldet kun kører når DOM er fuldt indlæst og er klar til at manipulere.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Dernæst skal du definere makeLinksSmooth() fungere. Start med at vælge ankertags i navigationen, da du vil ændre deres adfærd. Gentag derefter hvert link og tilføj en begivenhedslytter til dens klikbegivenhed.

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

Til sidst skal du definere smoothScroll() funktion, som tager et hændelseslytterobjekt. Kald preventDefault() for at sikre, at browseren ikke udfører sin standardhandling, når du klikker på linket. Den følgende kode erstatter den.

Grib href-værdien af ​​det aktuelle ankertag og gem det i en variabel. Denne værdi skal være id'et for målsektionen med præfikset "#", så brug den til at vælge sektionens element via querySelector(). Hvis targetElementet er til stede, skal du køre det scrollIntoView metode og videregive den "glatte" adfærd i en objektparameter for at fuldføre effekten.

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

Med det vil din færdige webside rulle glat til hver sektion, når du klikker på et link:

For yderligere at forbedre den glatte rulleoplevelse kan du finjustere visse aspekter.

Du kan justere den lodrette position af rullen ved hjælp af blok egenskaben for indstillingsargumentet. Brug værdier som "start", "center" eller "slut" til at identificere den del af målelementet, der skal rulles til:

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

Tilføjelse af lempende effekter

Anvend lette effekter på rulleanimationen for at skabe en mere naturlig og visuelt tiltalende overgang. Lempende funktioner såsom ease-in, ease-out eller brugerdefinerede cubic-bezier kurver kan styre scrollbevægelsens acceleration og deceleration. Du kan bruge en brugerdefineret timingfunktion med CSS-egenskaben for rulleadfærd eller et JavaScript-bibliotek såsom "smooth-scroll" for at opnå det samme resultat.

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

Sørg for, at din implementering af jævn rulning fungerer konsekvent på tværs af forskellige browsere. Test og håndter eventuelle browserspecifikke særheder eller uoverensstemmelser, der måtte opstå.

Du kan bruge en hjemmeside som f.eks Kan jeg bruge at teste browserunderstøttelse, når du bygger. Overvej at bruge et JavaScript-bibliotek eller polyfill for at sikre kompatibilitet på tværs af browsere og give en problemfri oplevelse for alle brugere.

Glat rulning tilføjer et strejf af elegance og forbedrer brugeroplevelsen ved at skabe en flydende og visuelt tiltalende rulningseffekt. Ved at følge de trin, der er beskrevet i denne vejledning, kan webudviklere implementere jævn rulning ved hjælp af JavaScript.

Finjustering af rulleadfærden, tilføjelse af lette effekter og sikring af kompatibilitet på tværs af browsere forbedre den jævne rulningsoplevelse yderligere, hvilket gør dine websider mere engagerende og behagelige at bruge navigere.