Back to top button/Terug naar boven knop maken

Q: Hoe maak ik smooth scrolling?

Met CSS: html { scroll-behavior: smooth; }. Met JavaScript: window.scrollTo({ top: 0, behavior: 'smooth' });. De JavaScript methode biedt meer controle en betere browser ondersteuning. Internet Explorer ondersteunt scroll-behavior niet.

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 WordPressKeurigOnline zegtWordPressWordPress is een open-source contentmanagementsysteem (CMS) geschreven in PHP, waarmee je eenvoudig websites en blogs kunt bouwen en beheren.: installeer WPFront Scroll Top plugin. Met code: combineer een fixed-position button met window.scrollTo({top: 0, behavior: 'smooth'}) JavaScriptKeurigOnline zegtJavaScriptJavaScript is een programmeertaal die wordt gebruikt om interactieve en dynamische websites te maken..

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 WordPress plugins of met eigen HTMLKeurigOnline zegtHTMLHTML is de programmeertaal voor het maken van webpagina’s., CSSKeurigOnline zegtCSSCSS (Cascading Style Sheets) is een opmaaktaal voor het vormgeven en stylen van webpagina's en documenten. en JavaScript. We behandelen ook een CSS-only variant zonder JavaScript en accessibility best practices.

Back to top button: een moderne scroll naar boven knop rechtsonder op een website mockup die bezoekers helpt snel naar boven te navigeren

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 om gratis te oefenen.

WPFront Scroll Top installeren in 9 stappen

Open WordPressKeurigOnline zegtWordPressWordPress is een open-source contentmanagementsysteem (CMS) geschreven in PHP, waarmee je eenvoudig websites en blogs kunt bouwen en beheren. dashboard — Log in op je WordPress admin
Ga naar Plugins — Klik op Plugins → Nieuwe plugin
Zoek de plugin — Type "WPFront Scroll Top" in het zoekveld
Installeer — Klik op Nu installeren
Activeer — Klik op Activeren
Open instellingen — Ga naar Instellingen → Scroll Top
Schakel in — Vink Enabled aan
Kies icoon — Selecteer je gewenste icoon of upload een eigen afbeelding
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

Verschillende back to top button stijlen: minimalistisch pijltje, cirkel met icoon, tekst button en progress indicator

Back to Top in Elementor

Back to Top toevoegen in Elementor in 4 stappen

Widget toevoegen — Voeg een Button of Icon widget toe aan je footer
Link instellen — Zet de link op #top
ID toevoegen — Voeg de ID top toe aan je header sectie
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? 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.

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 JavaScriptKeurigOnline zegtJavaScriptJavaScript is een programmeertaal die wordt gebruikt om interactieve en dynamische websites te maken. 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

aria-label toevoegen — Voeg toe: aria-label="Terug naar boven" voor screenreaders
Keyboard support — De button moet focusbaar zijn met Tab en activeerbaar met Enter
Focus visible — Toon een duidelijke focus ring bij keyboard navigatie
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 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 zegtCSSCSS (Cascading Style Sheets) is een opmaaktaal voor het vormgeven en stylen van webpagina's en documenten.: htmlKeurigOnline zegtHTMLHTML is de programmeertaal voor het maken van webpagina’s. { scroll-behavior: smooth; }. Met JavaScript: window.scrollTo({ top: 0, behavior: 'smooth' });. De JavaScript 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 JavaScriptKeurigOnline zegtJavaScriptJavaScript is een programmeertaal die wordt gebruikt om interactieve en dynamische websites te maken. 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 en WordPress sneller maken.

Bronnen

Back-to-Top Button Design Guidelines — Nielsen Norman Group
WPFront Scroll Top — WordPressKeurigOnline zegtWordPressWordPress is een open-source contentmanagementsysteem (CMS) geschreven in PHP, waarmee je eenvoudig websites en blogs kunt bouwen en beheren..org
scroll-behavior — MDN Web Docs
CSS scroll-behavior browser support — Can I Use
Buttons - Human Interface Guidelines — Apple Developer
Intersection Observer API — MDN Web Docs

Je winkelwagen is leeg

Op deze pagina

Back to top button/Terug naar boven knop maken

Wat is een Back to Top Button?

Waarom een terug naar boven knop?

Wanneer wel en niet gebruiken

Back to Top Button in WordPress

Plugin vergelijking

WPFront Scroll Top installeren (aanbevolen)

WPFront Scroll Top instellingen

Back to Top in Elementor

Back to Top Button met HTML, CSS en JavaScript

Basis implementatie

Animated Circle Button

Progress Ring Button

Tooltip Button

CSS-Only Back to Top (Geen JavaScript)

Voor- en nadelen CSS-only

Best Practices

Plaatsing

Design richtlijnen

Wanneer tonen

Accessibility

Performance optimalisatie

Veelgestelde vragen

Wat is een back to top button?

Wanneer moet de back to top button verschijnen?

Is een back to top button nodig voor elke website?

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

Hoe maak ik smooth scrolling?

Werkt de back to top button op mobiel?

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

Samenvatting

Bronnen

Je winkelwagen is leeg

Je winkelwagen is leeg

Op deze pagina

Wat is een Back to Top Button?

Waarom een terug naar boven knop?

Wanneer wel en niet gebruiken

Back to Top Button in WordPress

Plugin vergelijking

WPFront Scroll Top installeren (aanbevolen)

WPFront Scroll Top instellingen

Back to Top in Elementor

Back to Top Button met HTML, CSS en JavaScript

Basis implementatie

Animated Circle Button

Progress Ring Button

Tooltip Button

CSS-Only Back to Top (Geen JavaScript)

Voor- en nadelen CSS-only

Best Practices

Plaatsing

Design richtlijnen

Wanneer tonen

Accessibility

Performance optimalisatie

Veelgestelde vragen

Wat is een back to top button?

Wanneer moet de back to top button verschijnen?

Is een back to top button nodig voor elke website?

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

Hoe maak ik smooth scrolling?

Werkt de back to top button op mobiel?

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

Samenvatting

Bronnen

WhatsApp button op je website plaatsen

301 redirect WordPress: zo behoud je SEO bij verwijderde pagina's

5 redenen waarom je WordPress site zo langzaam is (en hoe je het oplost)