Un bouton "back to top" fluide grâce à jQuery

bouton-back-to-top-jquery-blogger
5 février 2016 In tutoriels

Un bouton "back to top" fluide grâce à jQuery

Vous l’aurez compris, aujourd’hui je reviens avec un nouvel article tutoriel. Comme quelques personnes me l’ont demandé à la suite du premier tutoriel « Ajouter un bouton de retour en haut de page », il est possible d’obtenir un défilement fluide, contrairement à ce premier tutoriel, ceci grâce à la bibliothèque jQuery.

Pas de panique, cela n’est pas très compliqué, à vrai dire, c’est même très simple.

Ce tutoriel est valable et testé pour la plateforme blogger, mais cela doit également fonctionner sous wordpress, en auto hébergé évidemment car les blogs wordpress.com n’auront pas accès au code source du blog.

 

A titre d’exemple, cela donnera comme sur ce blog (vous verrez apparaître la flèche en bas à droite en descendant)

Sur un blog Blogger, modèle > modifier le code HTML 

1. Lier la bibliothèque jQuery grâce à ce lien juste avant la balise </head> :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"/>

2. installer le code suivant après la balise <footer>

<!--Debut bouton back to top-->
<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;
}
.back-to-top img{
  width: 60px;
  opacity: .2;
  filter: alpha(opacity=20);
  transition: all .4s ease-out;
  -o-transition: all .5s ease-out;
  -moz-transition: all .4s ease-out;
  -webkit-transition: all .4s ease-out;
}

.back-to-top img:hover {
  text-decoration: none;
  opacity: .9;
}
</style>











<a class="back-to-top" href="#"><img alt="Back to Top" src="https://lh3.googleusercontent.com/-3RldGtL2azw/VrOzk609bmI/AAAAAAAABMw/xk8QnsFub7Q/s70-Ic42/BackToTop.png" data-jpibfi-post-excerpt="" data-jpibfi-post-url="http://www.cdl-graphicart.com/un-bouton-back-to-top-fluide-grace-a-jquery/" data-jpibfi-post-title="Un bouton "back to top" fluide grâce à jQuery" data-jpibfi-src="https://lh3.googleusercontent.com/-3RldGtL2azw/VrOzk609bmI/AAAAAAAABMw/xk8QnsFub7Q/s70-Ic42/BackToTop.png" ></a>
<!--fin bouton back to top-->

 

Pour finir, pour changer l'aspect de la flèche, il suffit de changer l'image, et remplacer l'url de votre nouvelle image dans le code toute la partie entre " " après le src= ) :

<img alt="Back to Top" src="https://lh3.googleusercontent.com/-3RldGtL2azw/VrOzk609bmI/AAAAAAAABMw/xk8QnsFub7Q/s70-Ic42/BackToTop.png" data-jpibfi-post-excerpt="" data-jpibfi-post-url="http://www.cdl-graphicart.com/un-bouton-back-to-top-fluide-grace-a-jquery/" data-jpibfi-post-title="Un bouton "back to top" fluide grâce à jQuery" data-jpibfi-src="https://lh3.googleusercontent.com/-3RldGtL2azw/VrOzk609bmI/AAAAAAAABMw/xk8QnsFub7Q/s70-Ic42/BackToTop.png" >

 

Laissez moi un commentaire avec un lien si vous l'avez installé :-)

10 Commentaires

  • Maryssa

    13 février 2016 at 20 h 23 min Répondre

    Je viens d’essayer, mais je ne trouve pas la balise footer… j’ai installé ton thème gratuit c’est peut être pour ça!

  • Laura

    14 février 2016 at 15 h 04 min Répondre

    Merci pour ce petit tuto, je l’ai fais sur mon blog test http://blogtestmiss.blogspot.fr/ 😉

    • graphicart

      15 février 2016 at 21 h 21 min Répondre

      Hey Laura :) merci pour ton commentaire, je suis allée voir ton blog, il est sympa! peux tu me dire quelle typo tu utilises pour ta bannière et tes photos d’articles? je l’aime beaucoup et la vois souvent mais impossible de trouver le nom haha.

  • Tatjana

    9 mars 2016 at 19 h 34 min Répondre

    Merci pour l’astuce!!! C’est chouette sur mon blog 😉

  • NorthxSouth

    11 avril 2016 at 21 h 22 min Répondre

    Un tuto très facile d’application, comme d’habitude.. merci pour tes cours!
    J’ai installé ce petit nouveau, très pratique je dois l’avouer. !
    Bonne soirée!
    NxS

    http://northxxsouth.blogspot.fr/

  • Marie Sandrine

    14 avril 2016 at 22 h 35 min Répondre

    Merciiii c’est un’astuce géniale! je vais le faire sur mon blog des chats mignons et fringes

  • Kitouchy

    30 mai 2016 at 20 h 37 min Répondre

    Bonjour,

    Merci pour tous les tutos que tu nous fournis, j’en ai utilisé plusieurs :) Mais je bloque sur celui ci, est il possible de changer le fond noir ? J’ai beau bidouiller le code je ne trouve pas.

    Bises

  • Gr3nouille

    7 juin 2016 at 19 h 58 min Répondre

    Coucou

    Merci pour ce tuto :) Par contre j’ai un petit souci sur mon blog, le bouton ne se voit pas (sous Mozilla en tout cas). On peut cliquer dessus (comme je savais où il se trouverait j’ai testé) mais on ne le voit pas du tout. Tu saurais de quoi ça pourrait venir ?

    Merci encore, bonne continuation

  • Suzie Rinna

    22 août 2016 at 19 h 39 min Répondre

    Coucou, j’ai réussi à l’installer *.* http://rose-paillettes.blogspot.fr/

  • Freddy

    13 octobre 2016 at 21 h 00 min Répondre

    Merci bien ! Débutant en js je cherchais à obtenir cet effet. C’est pile ce que je voulais mais en plus cela m’a permis de comprendre un peu mieux la sémantique de la chose.
    Installé et fonctionnel au second essai (au 1er j’ai fait doublon avec une bibliothèque jquery de version plus ancienne que j’avais déjà installé pour un slide et qui me faisait disparaitre ce dernier).

Poster un commentaire