Top button toevoegen aan je WordPress website
Ook altijd een button willen hebben op je paginas die het voor de gebruiker gemakkelijk maakt terug naar boven te scrollen? Hieronder vind je de nodige informatie en code om eenvoudig een “Scroll back to top button” toe te voegen aan je WordPress website.
Scroll To Top Button ingrediëntenlijst
- Toegang tot de mappen en bestandenstructuur van je website via FTP of het admin paneel van je hosting provider.
- Een plugin waarmee je stukjes code kan toevoegen aan je functions.php bestand
- Een afbeelding die wil gebruiken als aanklikbaar object of button
- Je favoriete text editor (Notepad , Notepad++ , …)
Scroll To Top Button recept
WordPress scroll top button – stap 1
Open een text editor naar keuze en plak er onderstaande code in. Sla het bestand vervolgens op met de naam topbutton.js
jQuery(document).ready(function($){
var offset = 100;
var speed = 250;
var duration = 500;
$(window).scroll(function(){
if ($(this).scrollTop() < offset) {
$('.topbutton') .fadeOut(duration);
} else {
$('.topbutton') .fadeIn(duration);
}
});
$('.topbutton').on('click', function(){
$('html, body').animate({scrollTop:0}, speed);
return false;
});
});WordPress scroll top button – stap 2
Maak verbinding met de folderstructuur van je website via FTP of via het control panel van je hosting provider en navigeer naar de map /wp-content/themes/jouwthema/js
De foldernaam “jouwthema” is fictief gekozen, en zal bij jouw een andere naam hebben.
Vervolgens kan je het bestand topbutton.js opladen naar de folder die je zonet selecteerde. Na het plaatsen van het bestand topbutton.js mag je de verbinding met de ftp server verbreken
WordPress scroll top button – stap 3
Ga op zoek naar een geschikte afbeelding die je wil inzetten als button om naar de bovenzijde van je pagina te scrollen. De afbeelding die ik gebruikte heeft de afmetingen van 50px bij 50px 72dpi. Van zodra je de geschikte afbeelding op de kop kon tikken kan je hem toevoegen aan je media bibliotheek via je WordPress admin dashboard. Kopieer tijdelijk de url van de afbeelding naar een kladblok bestandje. Zo meteen hebben we de URL nodig om de afbeelding toe te voegen aan onze stukje code.
WordPress scroll top button – stap 4
Open je WordPress admin dashboard en maak een nieuwe Snippet aan.
Mocht je de Code Snippets plugin nog niet geïnstalleerd hebben, dan kan je hem hier terugvinden. Geef je snippet een zinvolle naam, zodat jij achteraf nog weet waarom je deze snippet hebt toegevoegd. Vervolgens kan je onderstaande code kopiëren en plakken in je snippet venster.
// DEEL 1 CSS voor de positionering en de weergave van onze button
add_action( 'wp_head', function () { ?>
<style>
.topbutton {
height:70px;
width:70px;
position:fixed;
right:25px;
bottom:25px;
Z-index:1;
background-image:url("https://www.voorbeeld.com/wp-content/uploads/2021/08/arrow-up.png");
background-repeat:no-repeat;
display:none;
}
</style>
<?php } );
// DEEL 2 Inladen van het topbutton.js bestand
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/topbutton.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
// Deel 3 Toevoegen van onze pijl aan de HTML structuur van onze website
function your_function() {
echo '<a href="#" class="topbutton"> </a>';
}
add_action( 'wp_footer', 'your_function' );Hou er rekening mee dat de URL van de achtergrondafbeelding aangepast zal moeten worden naar de URL die je eerder kopieerde in het kladblok bestandje.
background-image:url("https://www.voorbeeld.com/wp-content/uploads/2021/08/arrow-up.png");Werk je liever niet met de absolute url van je website? Dan kan je het stukje url https://www.voorbeeld.com/wp-content/ vervangen door onderstaande regel
background-image:url("<?php echo content_url(); ?>/uploads/2021/08/arrow-up.png");