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.
Lydie
Bonjour,
Vous dites que si le code ne marche pas sur Blogger il faut installer le code proposé juste après :
Mais je ne vois pas de …
Merci pour votre aide.
Lydie
Bon. J’ai trouvé la solution à mon problème !
Merci beaucoup pour ce tuto ;)