Zo voeg je een Terug Naar Boven knop toe!

Zo voeg je een Terug Naar Boven knop toe!

Als je veel content op je WordPress site hebt, betekent dat in veel gevallen ook dat je bezoekers veel moeten scrollen. Wil je het lezen van lange artikelen makkelijker en prettiger maken voor je bezoekers, dan kun je ervoor zorgen dat ze met één knop weer helemaal naar de bovenkant van de pagina kunnen. Het toevoegen van een Terug Naar Boven knop kan scroll kwesties oplossen en is super eenvoudig om te implementeren. In dit artikel leggen we uit hoe je dat doet.

Een Terug Naar Boven knop toevoegen

Stap #1

Eerst open je het CSS bestand van je website. In WordPress is dit het style.css bestand van je thema. Voeg de onderstaande code hier aan toe:

 

.back-to-top {

   display:none;

   position: fixed;

   bottom: 2em;

   right: 0px;

   text-decoration: none;

   color: #000000;

   background-color: rgba(235, 235, 235, 0.80);

   font-size: 12px;

   padding: 1em;

   

}

 

.back-to-top:hover {   

   background-color: rgba(135, 135, 135, 0.50);

   text-decoration:none;

   color:#ffffff;

}

 

Stap #2

Nu moet je zorgen dat je website jQuery laadt. Voeg dit stukje code toe in het <head> gedeelte van het HTML bestand van je thema:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Als hier al een soortgelijk jQuery scriptje staat, dan hoef je deze natuurlijk niet toe te voegen. Eén jQuery script is voldoende!

Stap #3

In hetzelfde HTML bestand voeg je dit stukje code toe, vlak voor de </body> tag:

<a href="#" class="back-to-top">Terug Naar Boven</a>

<script>

jQuery(document).ready(function() {

var offset = 220;

var duration = 500;

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop() > offset) {

jQuery('.back-to-top').fadeIn(duration);

} else {

jQuery('.back-to-top').fadeOut(duration);

}

});




jQuery('.back-to-top').click(function(event) {

event.preventDefault();

jQuery('html, body').animate({scrollTop: 0}, duration);

return false;

})

});

</script>

Sla de wijzigingen op en bekijk je pagina aan de ‘voorkant.’ Als het goed is moet je de Terug Naar Boven link zien verschijnen terwijl je naar beneden scrollt!

Tot slot

Het implementeren van een Terug Naar Boven knop draagt bij aan de gebruiksvriendelijkheid van je website. En vergeet vooral niet dat de mobiele versie van je website (die tegenwoordig echt van essentieel belang is) minstens zo gebruiksvriendelijk moet zijn!

 

Wil jij meer leren over Wordpress?

In de kennisbank vertellen we je alles over de belangrijkste onderwerpen

  • Snel en gemakkelijk contact met een WordPress expert
  • Ontvang als eerste nieuwtjes & leuke acties
  • Overleg met andere WordPress fans

Je WordPress vraag of probleem razendsnel opgelost met de hulp van een echte WordPress developer!

Join de grootste WordPress community van Nederland & stel je vraag via ons WordPress ticketsysteem.

Blijf op de hoogte van het laatste WordPress nieuws.

Schrijf je in voor onze wekelijkse nieuwsbrief.