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> :
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é 🙂
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.
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
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.
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 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).
Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considérerons que vous acceptez l'utilisation des cookies.Ok
Maryssa
13 février 2016 at 20 h 23 minJe 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 minMerci 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 minHey 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 minMerci pour l’astuce!!! C’est chouette sur mon blog 😉
NorthxSouth
11 avril 2016 at 21 h 22 minUn 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 minMerciiii 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 minBonjour,
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 minCoucou
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 minCoucou, j’ai réussi à l’installer *.* http://rose-paillettes.blogspot.fr/
Freddy
13 octobre 2016 at 21 h 00 minMerci 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).
Gaelle de Smoothie Bikini
8 novembre 2016 at 14 h 54 minHello ! Super tuto vraiment très simple. Je viens de l’installer sur mon blog. Merci 🙂
Générer une lecture d'article au hasard avec Blogger
21 mai 2018 at 19 h 57 min[…] Un bouton back to top fluide grâce à jQuery […]
Ajouter un bouton de retour vers le haut de la page [wp+blogger]
23 mai 2018 at 23 h 07 min[…] Un bouton « retour haut de page » fluide grâce à jQuery […]