Hoe te maken: soepele scroll

Leer hoe je een soepele scroll-effect met CSS maakt.

Gladde scrolling

Section 1
Klik me, scroll glad naar de onderste sectie 2.

Klik op de link om het "gladde" scrollen te zien.

Let op:Verwijder het scroll-behavior-eigenschap om gladde scrolling te annuleren.

Gladde scrolling

voeg toe aan het <html>-element scroll-behavior: smooth Je kunt gladde scrolling inschakelen voor de hele pagina:

Let op:Je kunt het ook toevoegen aan specifieke elementen/scrollcontainers.

Voorbeeld

html {
  scroll-behavior: smooth;
}

Probeer het zelf

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die het scroll-behavior-eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0

cross-browser oplossing

niet ondersteunen scroll-behavior voor browsers die het scroll-behavior jQuery）om een op alle browsers werkende oplossing te creëren:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // Voeg gladde scrolling toe aan alle links
  $("a").on('click', function(event) {
    // Zorg ervoor dat this.hash een waarde heeft voordat je het standaard gedrag overschrijft
    if (this.hash !== "") {
      // Voorkom het standaard klikgedrag van de anker
      event.preventDefault();
      // Sla de hashwaarde op
      var hash = this.hash;
      // Gebruik de animate() methode van jQuery om een gladde pagina scrolling toe te voegen
      // Optionele nummers (800) specificeert het aantal milliseconden nodig voor het scrollen naar de specifieke regio
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // Voeg na het voltooien van het scrollen het hashtag (#) toe aan de URL (standaard klikgedrag)
        window.location.hash = hash;
      );
    } // Einde van de if
  );
);
</script>

Probeer het zelf

Gerelateerde pagina's

Referentiemanual:CSS scroll-behavior eigenschap