Jevn scrolling med JavaScript: Guide for webutviklere

by
Tweet
Share
Share
Pin
0 Shares

En Veiledning for Webutviklere om Jevn Rulling

Jevn rulling er en teknikk som er populær innen webutvikling for å gi en flytende og behagelig brukeropplevelse. Istedenfor den vanlige, brå forflytningen mellom seksjoner på en nettside, animeres rullebevegelsen, noe som gir en mer elegant og brukervennlig navigasjon.

Denne detaljerte veiledningen er laget for webutviklere som ønsker å lære hvordan man implementerer jevn rulling ved hjelp av JavaScript. Vi skal gå gjennom alle trinnene, fra grunnleggende HTML-struktur til avanserte tilpasninger.

Essensen av jevn rulling ligger i å sørge for at nettsiden glir jevnt til ønsket posisjon i stedet for å hoppe dit umiddelbart. Dette resulterer i en mye mer komfortabel og sømløs brukeropplevelse.

Fordeler med Jevn Rulling

Jevn rulling er ikke bare en kosmetisk endring; det har flere positive effekter på brukeropplevelsen:

  • Det forbedrer det visuelle inntrykket ved å fjerne hakkete og brå bevegelser. Dette gir et mer polert og profesjonelt utseende.
  • Det øker brukermedvirkningen fordi den sømløse rulleopplevelsen stimulerer brukeren til å utforske innholdet videre.
  • Jevn rulling gjør også navigasjonen enklere, spesielt på lange nettsider eller når man navigerer mellom ulike seksjoner.

For å oppnå jevn rulling, bruker vi JavaScript for å endre standard rullefunksjonalitet.

HTML-Struktur

La oss begynne med å sette opp den nødvendige HTML-strukturen for navigasjon og de ulike innholdsseksjonene.

 <html lang="no">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="https://wilku.top/a-guide-for-web-developers/./style.css" />
     <title>Veiledning om Jevn Rulling for Webutviklere</title>
   </head>
   <body>
     <nav>
       <ul>
         <li><a href="#section1">Seksjon 1</a></li>
         <li><a href="#section2">Seksjon 2</a></li>
         <li><a href="#section3">Seksjon 3</a></li>
       </ul>
     </nav>
    <section id="section1">
       <h2>Seksjon 1</h2>
     </section>
     <section id="section2">
       <h2>Seksjon 2</h2>
     </section>
     <section id="section3">
       <h2>Seksjon 3</h2>
     </section>
     <script src="https://wilku.top/a-guide-for-web-developers/./script.js"></script>
   </body>
 </html>

Denne HTML-koden inneholder en navigasjonslinje med tre lenker. Hver lenke har en unik href-attributt som peker til en tilsvarende seksjon på siden. Når man klikker på en lenke, skal den ideelt sett rulle til riktig seksjon.

CSS-Styling

For å gjøre nettsiden visuelt tiltalende, legger vi til litt CSS. Dette hjelper med å organisere innholdet på en pen og oversiktlig måte.

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
nav {
  background: #fff;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
  position: sticky;
  top: 0;
  padding: 30px;
}
nav ul {
  display: flex;
  gap: 10px;
  justify-content: center;
}
nav ul li {
  list-style: none;
}
nav ul li a {
  border-radius: 5px;
  border: 1.5px solid #909090;
  text-decoration: none;
  color: #333;
  padding: 10px 20px;
}
section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Med denne CSS-en vil lenkene vises som en rekke med knapper, og hver seksjon som et element med full høyde. Legg merke til at et klikk på en lenke for øyeblikket hopper til seksjonen uten animasjon.

JavaScript-Implementering

For å legge til en jevn animasjon når man klikker på en lenke, skal vi bruke scrollIntoView()-metoden. Dette er en innebygd JavaScript-metode som gjør at man kan rulle et element inn i det synlige området av nettleservinduet.

Når man kaller denne metoden, justerer nettleseren rulleposisjonen til elementets beholder (som vinduet eller en rullbar beholder) for å gjøre elementet synlig.

Vi legger til JavaScript-koden i en fil som heter script.js. Det er viktig å starte med å lytte til DOMContentLoaded-hendelsen for å sikre at koden kjører først når DOM-en er fulladet og klar til bruk.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Nå definerer vi makeLinksSmooth()-funksjonen. Denne funksjonen velger alle lenkene i navigasjonen og legger til en hendelseslytter for klikk-hendelsen til hver enkelt lenke.

function makeLinksSmooth() {
  const navLinks = document.querySelectorAll("nav a");

  navLinks.forEach((link) => {
    link.addEventListener("click", smoothScroll);
  });
}

Til slutt definerer vi smoothScroll()-funksjonen, som tar imot et hendelsesobjekt. Vi bruker preventDefault() for å hindre nettleseren fra å utføre standardhandlingen. Koden som følger erstatter denne handlingen.

Vi henter ut href-verdien fra lenken og lagrer den i en variabel. Denne verdien er ID-en til målseksjonen (med prefikset «#»), og vi bruker den til å velge elementet med querySelector(). Hvis elementet eksisterer, kalles scrollIntoView(), og vi sender { behavior: "smooth" } for å skape den jevne rulleeffekten.

function smoothScroll(e) {
  e.preventDefault();
  const targetId = this.getAttribute("href");
  const targetElement = document.querySelector(targetId);

  if (targetElement) {
    targetElement.scrollIntoView({ behavior: "smooth" });
  }
}

Med denne koden vil nettsiden rulle jevnt til riktig seksjon når man klikker på en av lenkene.

For å finjustere rulleopplevelsen enda mer, kan vi se på noen ekstra tilpasninger.

Justere Rulleposisjon

Du kan endre den vertikale posisjonen til rullen ved å bruke block-egenskapen i innstillingsargumentet. Verdier som «start», «center» eller «end» kan brukes til å definere hvilken del av elementet man skal rulle til:

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

Legge til Lettelseseffekter

Lettelseseffekter kan brukes for å gi en mer naturlig og visuelt behagelig rulleanimasjon. Disse effektene, som ease-in, ease-out eller tilpassede cubic-bezier-kurver, styrer akselerasjonen og retardasjonen i rullebevegelsen. Man kan bruke en tilpasset tidsfunksjon med CSS-egenskapen scroll-behavior, eller et JavaScript-bibliotek som «smooth-scroll» for å oppnå det samme.

html {
  scroll-behavior: smooth;
}
/* eller */
html {
  scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}

Det er viktig å sørge for at jevn rulling fungerer konsistent i ulike nettlesere. Test og håndter eventuelle nettleserspesifikke forskjeller som kan oppstå.

Du kan bruke et nettsted som Kan jeg bruke for å teste nettleserstøtte. Vurder å bruke et JavaScript-bibliotek eller polyfill for å sikre kompatibilitet og en sømløs opplevelse for alle brukere.

Jevn rulling gir et preg av eleganse og forbedrer brukeropplevelsen ved å skape en flytende og visuelt behagelig rulleeffekt. Ved å følge trinnene i denne veiledningen, kan webutviklere enkelt implementere jevn rulling ved hjelp av JavaScript.

Finjustering av rulleatferd, bruk av lettelseseffekter, og sikring av kompatibilitet på tvers av nettlesere, vil ytterligere forbedre den jevne rulleopplevelsen og gjøre nettsidene dine mer engasjerende og behagelige å navigere på.