Dans ce petit tuto on va apprendre comment faire pour ajouter un bouton JavaScript « Retour haut de page » communément appelé « scroll to top button » en anglais à votre blog WordPress sans plugin. C’est un bouton qui va permettre à l’utilisateur de remonter en haut de page plutôt que d’utiliser l’ascenseur ou la molette de sa souris. Ca ajoute une fonctionnalités et ça rend plutôt bien.
Comment ajouter un bouton « Retour haut de page » à votre blog?
L’utilisation de ce code est très simple, il suffit de copier le code ci-dessous et le coller dans un widgets texte de WordPress, il est préférable de mettre ce widget texte dans le footer si non dans le sidebar .
Voici un exemple :
Le code est aussi fonctionnel pour blogger.
Voici le code :
<!--Smooth Back to Top Button Start-->
<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>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="http://4.bp.blogspot.com/-ihc-8JR84oI/U_oXILTik7I/AAAAAAAACdQ/CM7w68Bdm1E/s1600/backtotop.png" alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->
vous pouvez bien sur changer l’image backtotop.png par une autre de votre choix.
Si le code ne marche pas :
Pour blogger : insérer ce code juste après <head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
Pour WordPress insérer ce code dans le fichier fonctions.php :
/** Add CDN version of jQuery */function my_init()
{
if (!is_admin())
{
wp_deregister_script('jquery');
// Load a copy of jQuery from the Google API CDN
// The last parameter set to TRUE states that it should be loaded
// in the footer.
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', FALSE, '1.11.0', false);
wp_enqueue_script('jquery');
}
}
add_action('init', 'my_init');
NB: sauvegarder votre thème avant toute manipulation.
Voici des boutons à utiliser :
Espérant que ce tuto vous aidera à bien installer un bouton retour en haut de page sur votre blog.
Laisser un commentaire