Ajouter le bouton « Retour haut de page » à votre blog sans plugin

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 :

bouton vers haut de page

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 :

bouton haut de page

bouton vers haut de page

Espérant que ce tuto vous aidera à bien installer un bouton retour en haut de page sur votre blog.

Article précédent

Ajouter une barre flottante de partage à votre blog sans plugin

Article suivant

Ajouter les boutons suivre/follow à Wordpress et blogger

Voir les commentaires (2)
  1. 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.

  2. Bon. J’ai trouvé la solution à mon problème !
    Merci beaucoup pour ce tuto ;)

Ajouter un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *