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!
Hoi, ik heb dit (verouderde) artikel uitgevoerd bij 1 van mijn sites. Nu zie ik dat de button wel werkt bij mijn laptopversie, maar juist niet op mijn IPhone.?