Code: Smooth scroll naar anker

Samenvatting

Normaal springt je browser meteen naar een ankerpunt als je op een interne link klikt. Met smooth scroll glijdt de pagina er vloeiend naartoe in plaats van te springen. Dit voelt prettiger en geeft je bezoeker een beter gevoel van waar ze op de pagina zijn. Handig als je pagina's hebt met meerdere secties en knoppen die naar een specifieke sectie scrollen.

Hoe werkt het

Je voegt een klein stukje CSS-code toe aan je website. Deze code vertelt de browser dat hij vloeiend moet scrollen in plaats van direct te springen.

Hoe ankerpunten werken in Mach3Blocks

In Mach3Blocks kun je elk blok een ID geven via de blok-instellingen. Stel je het ID in op bijvoorbeeld "contact", dan kun je een knop of link maken met als doel #contact. Als iemand op die knop klikt, scrollt de pagina naar dat blok.

Stappenplan

1. Ga naar Website-instellingen → tabblad Code → veld Head

2. Plak de volgende code:

    <style>
      html {
        scroll-behavior: smooth;
      }
    </style>
   

3. Sla op — dit geldt meteen voor alle pagina's van je website

Nettere versie (met respect voor gebruikersvoorkeuren)

Sommige mensen hebben in hun besturingssysteem ingesteld dat ze geen animaties willen zien. Met deze versie respecteer je die voorkeur — mensen die animaties uit hebben staan, krijgen gewoon een directe sprong:

    <style>
      @media (prefers-reduced-motion: no-preference) {
        html {
          scroll-behavior: smooth;
        }
      }
    </style>

Veelgestelde vragen

Werkt dit in alle browsers?
Ja, in alle moderne browsers. Alleen zeer oude versies van Safari (van vóór 2019) ondersteunen het niet — maar daar springt de pagina gewoon direct, dus er gaat niets kapot.

Ik gebruik ook JavaScript voor scroll-animaties — conflicteert dat?
Ja, dat kan conflicteren. Gebruik of CSS smooth scroll óf JavaScript scroll-animaties, niet allebei tegelijk.

Moet ik dit per pagina instellen?
Nee, als je het in de website-brede Head-code zet, geldt het automatisch voor alle pagina's.