---
title: "Back to top button/Terug naar boven knop maken"
description: "Leer hoe je een back to top button toevoegt aan je website. Met WordPress plugin of HTML/CSS/JavaScript code. Inclusief accessibility tips en CSS-only variant."
canonical: https://www.keurigonline.nl/blog/back-to-top-button
last_modified: 2025-10-27
---

### Op deze pagina

[Blog](https://www.keurigonline.nl/blog) / [ WordPress ](https://www.keurigonline.nl/blog/categorie/wordpress) · 16 januari 2026 · ~15 min lezen

# Back to top button/Terug naar boven knop maken

Leer hoe je een back to top button toevoegt aan je website. Met WordPress plugin of HTML/CSS/JavaScript code. Inclusief accessibility tips en CSS-only variant.

Geschreven door: Maarten Keizer

Deel dit artikel [ ](http://twitter.com/share?text=Back+to+top+button%2FTerug+naar+boven+knop+maken&url=https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fback-to-top-button) [ ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fback-to-top-button) [ ](mailto:?subject=Back+to+top+button%2FTerug+naar+boven+knop+maken&body=Bekijk+dit+artikel%3A+https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fback-to-top-button)

     Op deze pagina

   **Samenvatting: Back to Top Button**

Een back to top button (terug naar boven knop) is een element dat bezoekers met één klik terugbrengt naar de bovenkant van de pagina. Gebruik het op pagina's langer dan 4 schermhoogtes. In WordPress: installeer WPFront Scroll Top plugin. Met code: combineer een fixed-position button met `window.scrollTo({top: 0, behavior: 'smooth'})` JavaScript.

Een back to top button maakt lange pagina's gebruiksvriendelijker. Met de juiste code kunnen bezoekers binnen enkele seconden terug naar boven scrollen zonder eindeloos te hoeven swipen.

Uit onderzoek van de Nielsen Norman Group blijkt dat een scroll to top button pas zinvol is op pagina's langer dan 4 schermen.\[1\] Op kortere pagina's is de knop overbodig. Maar bij lange artikelen, productoverzichten of one-page websites is hij onmisbaar.

In dit artikel leer je wanneer je een terug naar boven knop moet gebruiken, hoe je hem toevoegt via WordPressKeurigOnline zegt [WordPress](https://www.keurigonline.nl/begrippenlijst/wordpress)WordPress is een open-source contentmanagementsysteem (CMS) geschreven in PHP, waarmee je eenvoudig websites en blogs kunt bouwen en beheren. plugins of met eigen HTMLKeurigOnline zegt [HTML](https://www.keurigonline.nl/begrippenlijst/html)HTML is de programmeertaal voor het maken van webpagina’s. , CSSKeurigOnline zegt [CSS](https://www.keurigonline.nl/begrippenlijst/css)CSS (Cascading Style Sheets) is een opmaaktaal voor het vormgeven en stylen van webpagina's en documenten. en JavaScriptKeurigOnline zegt [JavaScript](https://www.keurigonline.nl/begrippenlijst/javascript)JavaScript is een programmeertaal die wordt gebruikt om interactieve en dynamische websites te maken. . We behandelen ook een CSS-only variant zonder JavaScript en accessibility best practices.

 ---

## Wat is een Back to Top Button?

**Definitie:** Een back to top button (ook wel scroll to top button of terug naar boven knop) is een zwevend UI-element dat altijd zichtbaar blijft tijdens het scrollen. Wanneer bezoekers erop klikken, scrolt de pagina soepel terug naar de bovenkant.

### Waarom een terug naar boven knop?

Bezoekers die onderaan een lange pagina komen, willen vaak:

- Terug naar het navigatiemenu om een andere pagina te bezoeken
- Het zoekformulier opnieuw gebruiken
- Filter- of sorteeropties aanpassen
- De inhoudsopgave bekijken

**Keyboard shortcuts bestaan, maar weinig gebruikers kennen ze**

- **Home-toets** — Scrolt direct naar boven
- **Command + Pijl omhoog** — Mac shortcut
- **Ctrl + Home** — Windows shortcut

De gemiddelde websitebezoeker kent deze shortcuts niet.\[1\] Een duidelijke button lost dit op.

### Wanneer wel en niet gebruiken

| Situatie | Back to top button? |
|---|---|
| Pagina langer dan 4 schermhoogtes | **Ja** — Bespaart veel scrollen |
| Blog artikelen met veel tekst | **Ja** — Gebruikers lezen vaak niet alles |
| Productcategorieën met veel items | **Ja** — Filters staan bovenaan |
| One-page websites | **Ja** — Navigatie staat meestal bovenaan |
| Korte landingspagina's | **Nee** — Scrollen kost weinig moeite |
| Websites met sticky navigatie | **Misschien** — Afwegen of het nodig is |

**Tip:** Heb je een sticky menu? Dan is een back to top button vaak overbodig, omdat bezoekers al direct toegang hebben tot de navigatie.

 ---

## Back to Top Button in WordPress

Voor WordPress-gebruikers zijn er handige plugins die een scroll to top button toevoegen zonder code. Hieronder vergelijken we de beste opties.

### Plugin vergelijking

| Plugin | Actieve installaties | Gratis | Aanpasbaar | Lichtgewicht |
|---|---|---|---|---|
| **WPFront Scroll Top** | 200.000+ | ✓ | ✓ | ✓ |
| **To Top** | 100.000+ | ✓ | ✓ | ✓ |
| **Jeremie's Back to Top** | 10.000+ | ✓ | Beperkt | ✓✓ |
| **Smooth Back To Top** | 3.000+ | ✓ | ✓ | ✓ |

### WPFront Scroll Top installeren (aanbevolen)

WPFront Scroll Top is de populairste back to top plugin voor WordPress met meer dan 200.000 actieve installaties.\[2\] Nieuw met WordPress? Bekijk dan ook onze gids over [WordPress Studio](../../../blog/wordpress-studio) om gratis te oefenen.

**WPFront Scroll Top installeren in 9 stappen**

1. **Open WordPress dashboard** — Log in op je WordPress admin
2. **Ga naar Plugins** — Klik op *Plugins* → *Nieuwe plugin*
3. **Zoek de plugin** — Type "WPFront Scroll Top" in het zoekveld
4. **Installeer** — Klik op *Nu installeren*
5. **Activeer** — Klik op *Activeren*
6. **Open instellingen** — Ga naar *Instellingen* → *Scroll Top*
7. **Schakel in** — Vink *Enabled* aan
8. **Kies icoon** — Selecteer je gewenste icoon of upload een eigen afbeelding
9. **Opslaan** — Klik op *Save Changes*

### WPFront Scroll Top instellingen

De plugin biedt veel aanpassingsmogelijkheden:

- **Scroll offset** — Na hoeveel pixels scrollen de button verschijnt (standaard: 100px)
- **Button size** — Grootte van de knop (35-60px werkt goed)
- **Opacity** — Transparantie van de button (0.7-1 is leesbaar)
- **Location** — Positie: rechtsonder, linksonder, rechtsboven, linksboven
- **Margins** — Afstand tot de rand van het scherm
- **Animation** — Fade, slide of geen animatie
- **Hide on small devices** — Verberg op mobiel (niet aanbevolen)
- **Hide on WP-Admin** — Verberg in het WordPress dashboard

### Back to Top in Elementor

**Back to Top toevoegen in Elementor in 4 stappen**

1. **Widget toevoegen** — Voeg een *Button* of *Icon* widget toe aan je footer
2. **Link instellen** — Zet de link op `#top`
3. **ID toevoegen** — Voeg de ID `top` toe aan je header sectie
4. **Positie stylen** — Stel *Position: Fixed* in via Advanced → Custom CSS

**Tip:** Elementor Pro heeft een ingebouwde *Back to Top* widget die standaard is inbegrepen. Geen extra configuratie nodig.

 ---

## Back to Top Button met HTML, CSS en JavaScript

Wil je volledige controle over het design of gebruik je geen WordPress? Met een paar regels code maak je een professionele terug naar boven knop. Hieronder vind je kant-en-klare voorbeelden met live demo's. Wil je eerst je [WordPress website sneller maken](../../../blog/wordpress-sneller-maken)? Doe dat dan eerst voordat je extra elementen toevoegt.

### Basis implementatie

De eenvoudigste werkende back to top button met JavaScript:

```
<button id="backToTop" onclick="scrollToTop()" title="Terug naar boven">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M18 15l-6-6-6 6"/>
</svg>
</button>

<!-- Dummy content to enable scrolling -->
<div style="height: 200vh; padding: 20px;">
<h2 style="color: white;">Scroll naar beneden om de button te zien</h2>
<p style="color: #aaa;">De back to top button verschijnt na 100px scrollen.</p>
</div>

```

```
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: #1a1a2e;
font-family: 'Geist', sans-serif;
}

h2, p {
font-family: 'Geist', sans-serif;
}

#backToTop {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
width: 50px;
height: 50px;
background: #f97316;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
transition: all 0.3s ease;
}

#backToTop:hover {
background: #ea580c;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
}

#backToTop.show {
display: flex;
}

```

```
// Show button after scrolling 100px
window.addEventListener('scroll', function() {
const button = document.getElementById('backToTop');
if (window.scrollY > 100) {
    button.classList.add('show');
} else {
    button.classList.remove('show');
}
});

// Smooth scroll to top
function scrollToTop() {
window.scrollTo({
    top: 0,
    behavior: 'smooth'
});
}

```

**Code uitleg**

- **position: fixed** — Button blijft op dezelfde plek tijdens scrollen
- **z-index: 9999** — Button zweeft boven alle andere elementen
- **window.scrollY > 100** — Toon button pas na 100px scrollen
- **behavior: 'smooth'** — Vloeiende scroll-animatie

### Animated Circle Button

Een opvallende variant met pulserende animatie die de aandacht trekt:

```
<button id="backToTopPulse" aria-label="Terug naar boven">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 19V5M5 12l7-7 7 7"/>
</svg>
</button>

<div style="height: 200vh; padding: 20px;">
<h2 style="color: white;">Scroll naar beneden</h2>
<p style="color: #aaa;">Let op de pulserende animatie!</p>
</div>

```

```
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0f172a; font-family: 'Geist', sans-serif; }
h2, p { font-family: 'Geist', sans-serif; }

#backToTopPulse {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
width: 56px;
height: 56px;
background: #f97316;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}

#backToTopPulse::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: #f97316;
animation: pulse 2s ease-out infinite;
z-index: -1;
}

#backToTopPulse:hover {
transform: scale(1.1);
}

#backToTopPulse:hover::before {
animation: none;
}

#backToTopPulse.show {
display: flex;
}

@keyframes pulse {
0% {
    transform: scale(1);
    opacity: 0.6;
}
100% {
    transform: scale(1.8);
    opacity: 0;
}
}

```

```
window.addEventListener('scroll', function() {
const button = document.getElementById('backToTopPulse');
if (window.scrollY > 100) {
    button.classList.add('show');
} else {
    button.classList.remove('show');
}
});

document.getElementById('backToTopPulse').addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});

```

De `@keyframes pulse` animatie creëert een uitdijende ring die de aandacht trekt.

### Progress Ring Button

Een geavanceerde variant die je scrollpositie visualiseert met een voortgangsindicator:

```
<button id="progressButton" aria-label="Terug naar boven">
<svg class="progress-ring" width="56" height="56">
    <circle class="progress-ring-bg" cx="28" cy="28" r="24"/>
    <circle class="progress-ring-fill" cx="28" cy="28" r="24"/>
</svg>
<svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M18 15l-6-6-6 6"/>
</svg>
</button>

<div style="height: 300vh; padding: 20px;">
<h2 style="color: white;">Scroll om de progress ring te zien</h2>
<p style="color: #aaa;">De oranje ring vult naarmate je scrollt.</p>
</div>

```

```
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0f172a; font-family: 'Geist', sans-serif; }
h2, p { font-family: 'Geist', sans-serif; }

#progressButton {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
width: 56px;
height: 56px;
background: #1e293b;
border: none;
border-radius: 50%;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

#progressButton.show { display: flex; }

#progressButton:hover {
transform: scale(1.1);
background: #334155;
}

.progress-ring {
position: absolute;
transform: rotate(-90deg);
}

.progress-ring-bg {
fill: none;
stroke: #334155;
stroke-width: 3;
}

.progress-ring-fill {
fill: none;
stroke: #f97316;
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 150.8;
stroke-dashoffset: 150.8;
transition: stroke-dashoffset 0.1s ease;
}

.arrow-icon {
position: absolute;
color: white;
}

```

```
const button = document.getElementById('progressButton');
const progressRing = document.querySelector('.progress-ring-fill');
const circumference = 2 * Math.PI * 24; // r=24

window.addEventListener('scroll', function() {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrollPercent = scrollTop / docHeight;

// Show/hide button
if (scrollTop > 100) {
    button.classList.add('show');
} else {
    button.classList.remove('show');
}

// Update progress ring
const offset = circumference - (scrollPercent * circumference);
progressRing.style.strokeDashoffset = offset;
});

button.addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});

```

Deze variant gebruikt SVG `stroke-dasharray` en `stroke-dashoffset` voor de voortgangsindicator.

### Tooltip Button

Een elegante variant met uitschuivend label bij hover:

```
<button id="tooltipButton" aria-label="Terug naar boven">
<span class="tooltip-text">Naar boven</span>
<span class="tooltip-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
      <path d="M18 15l-6-6-6 6"/>
    </svg>
</span>
</button>

<div style="height: 200vh; padding: 20px;">
<h2 style="color: white;">Hover over de button</h2>
<p style="color: #aaa;">De tekst schuift uit bij hover.</p>
</div>

```

```
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0f172a; font-family: 'Geist', sans-serif; }
h2, p { font-family: 'Geist', sans-serif; }

#tooltipButton {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
display: none;
align-items: center;
background: #f97316;
border: none;
border-radius: 50px;
cursor: pointer;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

#tooltipButton.show { display: flex; }

.tooltip-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}

.tooltip-text {
color: white;
font-family: 'Geist', sans-serif;
font-weight: 600;
font-size: 14px;
white-space: nowrap;
max-width: 0;
overflow: hidden;
opacity: 0;
padding-right: 0;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#tooltipButton:hover {
transform: scale(1.05);
box-shadow: 0 6px 25px rgba(249, 115, 22, 0.5);
}

#tooltipButton:hover .tooltip-text {
max-width: 120px;
opacity: 1;
padding-left: 16px;
padding-right: 16px;
}

```

```
window.addEventListener('scroll', function() {
const button = document.getElementById('tooltipButton');
if (window.scrollY > 100) {
    button.classList.add('show');
} else {
    button.classList.remove('show');
}
});

document.getElementById('tooltipButton').addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});

```

De `cubic-bezier` timing function zorgt voor een speelse bounce animatie.

**Performance tip:** Gebruik `transform` en `opacity` voor animaties. Deze zijn hardware-accelerated en belasten de browser minder dan animaties op `width` of `height`. Lees meer over [website snelheid optimaliseren](../../../blog/website-snelheid-testen-5-beste-tools).

 ---

## CSS-Only Back to Top (Geen JavaScript)

Wil je helemaal geen JavaScript gebruiken? Met CSS scroll-behavior en een anchor link kun je een werkende terug naar boven knop maken:

```
<!-- Anchor at top -->
<div id="top"></div>

<div style="height: 200vh; padding: 20px;">
<h2 style="color: white;">Pure CSS Back to Top</h2>
<p style="color: #aaa;">Scroll naar beneden en klik op de button. Geen JavaScript nodig!</p>
</div>

<!-- CSS-only back to top link -->
<a href="#top" class="css-back-to-top" aria-label="Terug naar boven">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M18 15l-6-6-6 6"/>
</svg>
</a>

```

```
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css');

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
scroll-behavior: smooth;
}

body {
background: #0f172a;
font-family: 'Geist', sans-serif;
}

h2, p {
font-family: 'Geist', sans-serif;
}

.css-back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
width: 50px;
height: 50px;
background: #f97316;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
transition: all 0.3s ease;
}

.css-back-to-top:hover {
background: #ea580c;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
color: white;
}

```

De CSS property `scroll-behavior: smooth` zorgt voor vloeiend scrollen naar anchor links.\[3\]

### Voor- en nadelen CSS-only

| Voordelen | Nadelen |
|---|---|
| Geen JavaScript nodig | Button is altijd zichtbaar (geen show/hide) |
| Werkt zonder JS ingeschakeld | Geen scroll progress indicator mogelijk |
| Maximale performance | Minder controle over animaties |
| Eenvoudig te implementeren | `scroll-behavior` niet ondersteund in oudere browsers |

**Let op: Browser compatibiliteit**

- `scroll-behavior: smooth` wordt **niet** ondersteund in Internet Explorer
- Moderne browsers (Chrome, Firefox, Safari, Edge) ondersteunen het wel\[4\]
- Overweeg een JavaScript fallback voor oudere browsers

 ---

## Best Practices

Een back to top button lijkt simpel, maar er zijn veel UX-overwegingen. Deze richtlijnen komen uit onderzoek van de Nielsen Norman Group.\[1\]

### Plaatsing

- **Rechtsonder** — De standaardpositie die bezoekers verwachten. Niet in de weg, wel zichtbaar.
- **Afstand tot rand** — Houd minimaal 20-30px afstand tot de schermrand.
- **Z-index** — Zorg dat de button boven andere elementen zweeft (`z-index: 9999`).
- **Niet over content** — Vermijd dat de button belangrijke elementen bedekt.

### Design richtlijnen

**Essentiële design regels**

- **Grootte** — Minimaal 44x44 pixels voor touch devices (Apple's Human Interface Guidelines)\[5\]
- **Contrast** — Zorg dat de button opvalt tegen de achtergrond
- **Icoon of tekst** — Een pijl omhoog is universeel herkenbaar. Tekst ("Naar boven") verduidelijkt
- **Consistentie** — Gebruik kleuren die passen bij je huisstijl

### Wanneer tonen

- **Na scrollen** — Toon de button pas na 100-200px scrollen of na 1 schermhoogte.
- **Bij omhoog scrollen** — Overweeg de button alleen te tonen wanneer de gebruiker omhoog begint te scrollen.
- **Vertraagde verschijning** — Een fade-in animatie is minder abrupt dan direct verschijnen.

### Accessibility

Maak je back to top button toegankelijk voor alle gebruikers:

**Accessibility checklist in 4 punten**

1. **aria-label toevoegen** — Voeg toe: `aria-label="Terug naar boven"` voor screenreaders
2. **Keyboard support** — De button moet focusbaar zijn met Tab en activeerbaar met Enter
3. **Focus visible** — Toon een duidelijke focus ring bij keyboard navigatie
4. **prefers-reduced-motion** — Respecteer gebruikers die beweging uitschakelen

CSS voor reduced motion:

```
@media (prefers-reduced-motion: reduce) {
html {
    scroll-behavior: auto;
}
#backToTop {
    transition: none;
}
}
```

### Performance optimalisatie

Vermijd performance problemen met deze tips:

- **Throttle scroll events** — Scroll listeners kunnen de browser vertragen. Gebruik `requestAnimationFrame` of een throttle functie.
- **Intersection Observer** — Moderner en efficiënter dan scroll events voor show/hide logica.\[6\]
- **CSS transforms** — Animeer met `transform` en `opacity` in plaats van `top/left/width/height`.
- **will-change** — Hint de browser over aankomende animaties: `will-change: transform, opacity;`

**Tip:** Wil je meer leren over website performance? Bekijk ons artikel over [LiteSpeed vs Apache](../../../blog/litespeed-vs-apache) voor server-side optimalisatie.

 ---

## Veelgestelde vragen

### Wat is een back to top button?

Een back to top button (terug naar boven knop) is een UI-element op een website waarmee bezoekers met één klik terug kunnen scrollen naar de bovenkant van de pagina. De button zweeft meestal rechtsonder in beeld met `position: fixed` en verschijnt pas na een bepaalde scrollafstand (meestal 100-200 pixels).

### Wanneer moet de back to top button verschijnen?

De button verschijnt idealiter na 100-200 pixels scrollen, of zodra de bezoeker voorbij de eerste schermhoogte is. Implementeer dit met JavaScript: `if (window.scrollY > 100) { button.classList.add('show'); }`. Sommige implementaties tonen de button alleen wanneer de gebruiker omhoog begint te scrollen.

### Is een back to top button nodig voor elke website?

Nee. Volgens de Nielsen Norman Group is een back to top button alleen zinvol op pagina's langer dan 4 schermen (circa 4000 pixels). Op kortere pagina's is handmatig scrollen net zo snel en voegt de button onnodig visuele ruis toe. Bij sticky navigatie is de button vaak overbodig.

### Wat is de beste positie voor een back to top button?

Rechtsonder is de standaard en verwachte positie. Plaats de button 20-30px van de schermrand met CSS: `bottom: 30px; right: 30px;`. Zorg dat hij niet over belangrijke content zweeft. Links plaatsen kan verwarring veroorzaken omdat gebruikers daar chat widgets verwachten.

### Hoe maak ik smooth scrolling?

Met CSSKeurigOnline zegt [CSS](https://www.keurigonline.nl/begrippenlijst/css)CSS (Cascading Style Sheets) is een opmaaktaal voor het vormgeven en stylen van webpagina's en documenten. : `html { scroll-behavior: smooth; }`. Met JavaScript: `window.scrollTo({ top: 0, behavior: 'smooth' });`. De JavaScriptKeurigOnline zegt [JavaScript](https://www.keurigonline.nl/begrippenlijst/javascript)JavaScript is een programmeertaal die wordt gebruikt om interactieve en dynamische websites te maken. methode biedt meer controle en betere browser ondersteuning. Internet Explorer ondersteunt `scroll-behavior` niet.

### Werkt de back to top button op mobiel?

Ja, mits je de button groot genoeg maakt. Apple's Human Interface Guidelines schrijven minimaal 44x44 pixels voor voor touch targets. Plaats de button niet te dicht bij de schermrand en houd rekening met de browser toolbar op iOS Safari die onderaan kan verschijnen.

### Welke WordPress plugin is het beste voor een back to top button?

WPFront Scroll Top is de populairste keuze met 200.000+ actieve installaties. De plugin biedt uitgebreide aanpassingsmogelijkheden voor icoon, kleur, positie en animatie. Voor een lichtgewicht alternatief is "To Top" (100.000+ installaties) een goede optie.

 ---

## Samenvatting

Een back to top button verbetert de gebruikerservaring op lange pagina's. Maar voeg hem alleen toe wanneer het echt nodig is.

**De belangrijkste punten**

- Gebruik een back to top button op pagina's langer dan 4 schermen
- Plaats de button rechtsonder met voldoende afstand tot de rand (20-30px)
- Maak de button minimaal 44x44px voor touch devices
- Toon de button pas na scrollen (100-200px)
- Gebruik `scroll-behavior: smooth` of JavaScript voor vloeiend scrollen
- Voeg `aria-label` toe voor screenreaders
- WordPress gebruikers: installeer WPFront Scroll Top of To Top plugin

Met de CodePen voorbeelden in dit artikel kun je direct aan de slag. Kies de stijl die past bij je website en pas de kleuren aan naar je huisstijl.

Wil je je website verder optimaliseren? Lees dan ook onze artikelen over [website beveiliging](../../../blog/website-beveiligen) en [WordPress sneller maken](../../../blog/wordpress-sneller-maken).

 ---

## Bronnen

1. [Back-to-Top Button Design Guidelines](https://www.nngroup.com/articles/back-to-top/) — Nielsen Norman Group
2. [WPFront Scroll Top](https://wordpress.org/plugins/wpfront-scroll-top/) — WordPressKeurigOnline zegt [WordPress](https://www.keurigonline.nl/begrippenlijst/wordpress)WordPress is een open-source contentmanagementsysteem (CMS) geschreven in PHP, waarmee je eenvoudig websites en blogs kunt bouwen en beheren. .org
3. [scroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) — MDN Web Docs
4. [CSS scroll-behavior browser support](https://caniuse.com/css-scroll-behavior) — Can I Use
5. [Buttons - Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/buttons) — Apple Developer
6. [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) — MDN Web Docs

Deel dit artikel:

[ ](https://twitter.com/share?text=Back+to+top+button%2FTerug+naar+boven+knop+maken&url=https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fback-to-top-button "Delen op Twitter") [ ](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fback-to-top-button "Delen op Facebook") [ ](whatsapp://send?text=https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fback-to-top-button "Delen op WhatsApp") [ ](http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fback-to-top-button&title=Back+to+top+button%2FTerug+naar+boven+knop+maken "Delen op LinkedIn") [ ](mailto:?subject=Back+to+top+button%2FTerug+naar+boven+knop+maken&body=Bekijk+dit+artikel%3A+https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fback-to-top-button "Versturen via email")

     De link is gekopieerd naar je klembord!

- WordPress 13 Jul

    ### WordPress-afbeeldingen naar WebP omzetten zonder plugin

     WordPress zet uploads niet automatisch om naar WebP. Met één native code-snippet comprimeer je afbeeldingen en verbeter je Core Web Vitals, geen plugin nodig.

     Pablo Cleij
- WordPress 7 Jul

    ### AI-agents inzetten op je WordPress-site: praktische gids (2026)

     WordPress 7.0 maakt je site aanroepbaar voor AI-agents via MCP. Ontdek de risico's, wat het voor je hosting betekent en praktische stappen om te starten.

     Pablo Cleij
- WordPress 28 Jun

    ### WordPress updates zonder downtime: zo doe je het veilig

     Leer hoe je WordPress plugins bijwerkt zonder downtime of breuk. Volgorde, staging via DirectAdmin, hybride auto-updatebeleid en rollback uitgelegd.

     Pablo Cleij