CSS Academy · leksjon

scroll-behavior: smooth

Aktiver jevn rulling for ankerlenker og programmatisk rulling med scroll-behavior.

Leksjon 2 av 413 trinn

scroll-behavior: smooth er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva er scroll-behavior?

scroll-behavior styrer om rulling som utløses av navigasjon (ankerkoblinger, JavaScript scrollTo()) skal animeres jevnt eller hoppe umiddelbart.

scroll-behavior: smooth

Når De setter scroll-behavior: smooth på html- eller body-elementet, animeres all navigasjon med ankerkoblinger på siden jevnt:

  <p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>

Umiddelbart eller jevnt

Verdier:

auto (standard): umiddelbart hopp
smooth: animert rulling til målet

Navigasjon med ankerkoblinger

Når jevn rulling er aktivert, ruller et klikk på en kobling som <a href="#contact"> jevnt til elementet med id="contact" i stedet for å hoppe dit umiddelbart.

  <nav>
    <a href="#about">About</a>
    <a href="#work">Work</a>
    <a href="#contact">Contact</a>
  </nav>
  <section id="about"><h3>About</h3></section>
  <section id="work"><h3>Work</h3></section>
  <section id="contact"><h3>Contact</h3></section>

JavaScript scrollTo() med jevn rulling

Send behavior: "smooth" til JavaScript-metoder for rulling for å få animert rulling:

  <pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });

document.querySelector('#section').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});</pre>

Samspill med prefers-reduced-motion

Jevn rulling kan utløse reisesyke. De bør alltid deaktivere den for brukere som foretrekker redusert bevegelse:

  <p>Respects <code>prefers-reduced-motion</code>.</p>

scroll-behavior på beholdere

Bruk dette på alle rullbare beholdere, ikke bare på siden:

  <div class="tabs-panel">
    <div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
  </div>

Begrensninger

CSS scroll-behavior gir ikke kontroll over rullingens varighet eller easing. Bruk JavaScript Web Animations API eller biblioteker som GSAP med rullepluginene deres for presis kontroll over animasjonen.

scroll-padding-top for faste topptekster

Når en fast topptekst overlapper ankermål, legger scroll-padding-top til et mellomrom slik at målet ikke skjules bak toppteksten:

  <p>Anchor targets offset by fixed header height.</p>

scroll-margin sammenlignet med scroll-padding

scroll-margin legger til mellomrom direkte på målelementet, mens scroll-padding legger til mellomrom i rullebeholderen. Begge løser problemet med faste topptekster:

  <div class="section">Section content</div>

Merknad om tilgjengelighet

Jevn rulling er en forbedring av brukeropplevelsen. Sørg alltid for at navigasjon med ankerkoblinger fungerer også uten dette – ikke vær avhengig av smooth scrolling for funksjonalitet, men bruk det bare som visuell finpuss.

Hurtigsjekk

Hvordan sørger De for at animasjon med jevn rulling deaktiveres for brukere som er følsomme for vestibulær bevegelse?

Besvar den i den interaktive leksjonen

Oppsummering

scroll-behavior: smooth på html aktiverer jevn, animert rulling for ankerkoblinger og JavaScript-metoder for rulling. Bruk scroll-padding-top for å plassere rullingsmål slik at de ikke skjules bak faste topptekster. De bør alltid deaktivere jevn rulling i en prefers-reduced-motion: reduce-mediespørring av hensyn til tilgjengeligheten.

Gratis å komme i gang

Lær deg CSS med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «scroll-behavior: smooth» gratis?

Ja – hele teksten i «scroll-behavior: smooth» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «scroll-behavior: smooth»?

Aktiver jevn rulling for ankerlenker og programmatisk rulling med scroll-behavior. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «scroll-behavior: smooth»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?

Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

overflow: hidden scroll auto clip
scroll-behavior: smooth
scroll-snap-type og scroll-snap-align
Tilpasse rullefelt med ::-webkit-scrollbar

← Tilbake til CSS Academy