CSS Academy · Les

scroll-behavior: smooth

Schakel soepel scrollen in voor ank links en programmatische scrollacties met scroll-behavior.

Les 2 van 413 stappen

scroll-behavior: smooth is een gratis CSS Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.

Wat is scroll-behavior?

scroll-behavior bepaalt of schuiven dat door navigatie wordt gestart (ankerkoppelingen, JavaScript scrollTo()) vloeiend wordt geanimeerd of direct verspringt.

scroll-behavior: smooth

Door scroll-behavior: smooth in te stellen op het html- of body-element, wordt alle navigatie via ankerkoppelingen op de pagina vloeiend geanimeerd:

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

Direct tegenover vloeiend

Waarden:

auto (standaard): direct verspringen
smooth: geanimeerd naar het doel schuiven

Navigatie via ankerkoppelingen

Als vloeiend schuiven is ingeschakeld, schuift het klikken op een koppeling zoals <a href="#contact"> vloeiend naar het element met id="contact" in plaats van er direct naartoe te springen.

  <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() met vloeiende animatie

Geef behavior: "smooth" door aan JavaScript-schijfmethoden voor geanimeerd schuiven:

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

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

Interactie met prefers-reduced-motion

Vloeiend schuiven kan bewegingsziekte veroorzaken. Schakel het daarom altijd uit voor gebruikers die de voorkeur geven aan minder beweging:

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

scroll-behavior op containers

Pas dit toe op elke schuifbare container, niet alleen op de pagina:

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

Beperkingen

CSS scroll-behavior geeft geen controle over de duur of versnelling van het schuiven. Gebruik voor nauwkeurige controle over animaties de Web Animations API van JavaScript of bibliotheken zoals GSAP met hun schuifplug-ins.

scroll-padding-top voor vaste kopteksten

Wanneer een vaste koptekst ankerdoelen overlapt, voegt scroll-padding-top een verschuiving toe zodat het doel niet achter de koptekst verborgen raakt:

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

scroll-margin tegenover scroll-padding

scroll-margin voegt rechtstreeks op het doelelement een verschuiving toe; scroll-padding voegt een verschuiving toe aan de schuifcontainer. Beide lossen het probleem met vaste kopteksten op:

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

Opmerking over toegankelijkheid

Vloeiend schuiven is een verbetering van de gebruikerservaring. Zorg er altijd voor dat navigatie via ankerkoppelingen ook zonder deze functie werkt — baseer functionaliteit niet op vloeiend schuiven, maar gebruik het alleen voor visuele verfijning.

Korte controle

Hoe zorgt u ervoor dat de vloeiende schuifanimatie wordt uitgeschakeld voor gebruikers met vestibulaire gevoeligheid voor beweging?

Beantwoord dit in de interactieve les

Samenvatting

scroll-behavior: smooth op html schakelt vloeiend, geanimeerd schuiven in voor ankerkoppelingen en JavaScript-schijfmethoden. Gebruik scroll-padding-top om schuifdoelen te verschuiven zodat ze niet achter vaste kopteksten verdwijnen. Schakel vloeiend schuiven voor toegankelijkheid altijd uit binnen een mediaquery prefers-reduced-motion: reduce.

Gratis beginnen

Leer CSS met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 40
Lessen: 159

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “scroll-behavior: smooth” gratis?

Ja — de volledige tekst van “scroll-behavior: smooth” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.

Wat leer ik in “scroll-behavior: smooth”?

Schakel soepel scrollen in voor ank links en programmatische scrollacties met scroll-behavior. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met CSS Academy te beginnen?

Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “scroll-behavior: smooth”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over CSS Academy?

Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

overflow: hidden scroll auto clip
scroll-behavior: smooth
scroll-snap-type en scroll-snap-align
Scrollbar-styling met ::-webkit-scrollbar

← Terug naar CSS Academy