Smooth scroll is, zoals de naam eigenlijk al zegt, het soepel (smooth) scrollen op een website. Een smooth scroll geeft de websitebezoeker een betere website ervaring. Het scrollen voelt namelijk een stuk vloeiender aan. Als je de “normale” scroll functionaliteit gebruikt, zal het scrollen wat schokkerig aanvoelen en lijkt het soms alsof de scroll plotseling stopt.

Het is een functionaliteit die door de meeste webbrowsers wordt geaccepteerd. Denk hierbij aan de browsers Google Chrome, Safari en Firefox. Je kan smooth scrolling toevoegen met CSS-code of jQuery code.

Onze webdevelopers stellen dagelijks de smooth scroll functie in voor verschillende websites. Ze leggen het uit:

Allereerst is het belangrijk om de juiste broncode op te zoeken. Dit kun je doen via de library van Github. Vervolgens dien je de library op te roepen binnen een eigen front-end omgeving, dit doe je met de code. Je kan de code verder naar wens aanpassen. Denk bijvoorbeeld aan de snelheid of smoothness. Wees wel secuur met het aanpassen van de code. Wanneer er iets ontbreekt of fout wordt ingevuld, dan werk het niet meer.

Een voorbeeld code:

const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});

Benieuwd naar nog meer interessante development trucjes? In onze blog lees je alles over de nieuwste CSS trends.