Ajouter un bouton de retour vers le haut de la page [wp+blogger]
En tant que grosse flemmarde (et ouais, même sur internet…) je trouve le bouton « back to top » présent sur certains site, très utile, ce petit bouton, généralement sous forme de flèche permet de retourner vers le haut de la page sans avoir à se taper 10 minutes de scroll vers le haut de la page (pour ceux qui ne connaissent pas « scroller » ça signifie juste faire défiler la page en langage de geek) c’est pour cela que je vous retrouve aujourd’hui, pour vous permettre à tous et à toutes (ouais que tu sois sur blogger ou wordpress, c’est ok!) ô chers blogueurs/blogueuses de palier à la flemmardise des internautes.
EDIT du 6 Fevrier 2016 :
Un aperçu du résultat avec le code que je vais vous donner (sans modification) :
Oui oui tu vois, c’est juste la petite flèche en bas à droite du site!
Collez y le code suivant :
Et parceque je suis une fille super généreuse et consciencieuse, je vous ai crée une série de boutons afin que vous trouviez celui qui correspondra le mieux à votre blog!
Non, ne vous inquiétez pas, vous n’aurez pas les vilains bords gris.
INSTALLATION
Pour installer la couleur qui vous plait dans le code que je vous ai donné plus haut, il vous suffit simplement de faire un clic gauche sur l’image puis « copier l’adresse de l’image » comme ceci :
Une fois que vous aurez copié l’adresse, vous pouvez changer la ligne suivante dans le code
http://i1262.photobucket.com/albums/ii617/cdlgraphicart/top_zps314948eb.png
puis remplacez par l'adresse de l'image préalablement choisie au dessus, et dans le code sélectionnez la partie entre guillemets puis effectuez un Ctrl/cmd + v (coller).Mission reussie, vous ferez des heureux à présent, j’espère que tout à bien fonctionné pour vous? et surtout que cette petite astuce vous à plu! n’hésitez pas à me faire part de vos impressions!
mylittleworldofnails
2 août 2014 at 8 h 35 minCa marche paas 🙁
graphicart
2 août 2014 at 10 h 03 minLe problème est résolu, tout fonctionne 🙂
Laetitia
2 août 2014 at 10 h 42 minCa marche!!!! Yeah :)) Merci beaucoup!!!
graphicart
2 août 2014 at 11 h 18 minJe suis allée voir c’est niquel 😉
Claire
2 août 2014 at 13 h 23 minSalut Charlène, je crois que tu n’as pas vu ma ptite réponse à ton commentaire sur Hellocoton alors je te fais copier/coller ici 🙂
» Salut, merci pour tes recommandations! Ne t’inquiètes pas j’avais ton article dans un coin de mon cerveau car je savais que c’était mieux d’éviter les plugins 🙂
Dis moi, il y a moyen de rajouter un « text-align:left » ou quelque chose comme ça ? »
Merci d’avance pour ta réponse, en fait j’aimerai le bouton sur le côté gauche de l’écran (que je suis relouuuu) 😀
graphicart
2 août 2014 at 16 h 51 minCoucou! eh bien tu remplaces simplement right par left! 😉
Delphine
3 août 2014 at 16 h 14 minça marche pas :'(
Je suis sur windows donc j’ai dû faire clic droit puis « copier l’url de l’image » (mais je pense que ça équivaut à ce que tu as dit), j’ai copier l’url de l’image sur ton site mais ça n’affichait que le code sur mon site et non la flêche puis j’ai essayé en enregistrant l’image sur photobucket et ça fonctionne pas non plus, pourtant j’ai respecté à la lettre tes explications.
Je te montre les deux codes que j’ai effectué :
src= »http://i1377.photobucket.com/albums/ah75/delgillet/thumbs_lavender_zpsa27cc199.png »/>
src= »http://www.cdl-graphicart.com/BLOG/wp-content/gallery/fleches-backtotop/thumbs/thumbs_lavender.png »/>
Est-ce qu’il y a une erreur quelque part ? Merci beaucoup d’avance 😀
Virée dans l'espace
3 août 2014 at 16 h 39 minMoi c’est bizarre car ça ne me met pas l’image de la flèche et seulement le texte..
graphicart
3 août 2014 at 16 h 42 minje viens d’identifier le problème les filles, c’est à nouveau à cause de mon éditeur de texte qui change le code sans arrêt –‘le code à été changé, cette fois ci c’est bon, il vous faut refaire la manipulation avec le nouveau code.
Delphine
3 août 2014 at 17 h 27 minC’est bon ça marche impeccable avec le nouveau code 🙂
Merci beaucoup 😀
Virée dans l'espace
3 août 2014 at 20 h 03 minOui trouvé ! Merci beaucoup !
Par contre j’ai toujours le bord gris autour de l’image o.O
graphicart
3 août 2014 at 20 h 07 minJ’ai regardé ton thème, malheuresement le problème vient de celui ci, il faudrait modifier le code suivant dans ton blog :
#masthead img, #featured-content img, #recent-content img, .entry-content img, .entry-thumb img, .comment-content img, .widget img {
background: none repeat scroll 0 0 #fff;
border: 1px solid #bbb;
mais vu que tu es sur wordpress.com tu n’as pas accès aux fichiers du code source…
jesy
4 août 2014 at 6 h 46 minCoucou, merci beaucoup, ça marche 🙂
graphicart
4 août 2014 at 10 h 03 minwahou tout rend très bien sur ton petit blog! 🙂 à bientôt Jesy.
jesy
4 août 2014 at 19 h 53 minOh vraiment? Merci c’est gentil d’être aller voir, mais je ne suis pas encore à 100% satisfaite de mon petit design haha je pense encore changer quelque truc a voir :/
graphicart
5 août 2014 at 8 h 49 minn’hésite pas si tu as des questions 😉
freaking Sassy
11 août 2014 at 3 h 09 minj’aime trop !! merci 🙂
graphicart
11 août 2014 at 13 h 40 minje suis aller faire un tour sur ton blog, je vois que tu mets en oeuvre mes tutos ça fait plaisir 🙂
Garance
21 août 2014 at 14 h 47 minTon blog est une tuerie !
Il m’aide beaucoup, je trouve que tu es la seule à pouvoir nous sauver sur ce genre de problèmes.
graphicart
21 août 2014 at 19 h 35 minhey! merci pour ton passage et ton compliment 🙂 ça me fait plaisir! à bientôt
Mélanie
23 août 2014 at 12 h 05 minNiquel, cette fois ci, sa a marché ! Bisous.
Mademoiselle K
23 août 2014 at 20 h 20 minYouhouuuu, ça marche!
graphicart
23 août 2014 at 20 h 56 minsuper! ton blog est très joli au passage, tu es surf blogspot?
Lady heavenly
2 octobre 2014 at 0 h 40 minCoucou la miss 🙂 Merci pour tous tes tutos !! Juste une petite question, lorsque je mets le petit bouton à droite (en changeant le left par right) ça ne fonctionne plus 🙁 La petite flèche est présente mais ne permet plus de remonter .. Du coup je laisse à gauche pour le moment .. Une idée du pb ? Merci
http://ladyheavenly.blogspot.com
graphicart
3 octobre 2014 at 23 h 35 minHello! ah bisard.. j’ai testé ton code et cela fonctionne quand je le remplace pourtant essaye à nouveau de remplacer la ligne correspondant de ton « display » jusqu’à « ; » display:scroll;position:fixed;bottom:5px;right:5px;
Cavali'Erre
8 octobre 2014 at 23 h 49 minMerci pour l’astuce, c’est top!
La Beauté en Blog
11 octobre 2014 at 13 h 54 minMerci beaucoup pour cette petite astuce, petite mais très pratique !!
Nicolas Lavigne
20 janvier 2015 at 15 h 17 minBonjour c’est genial cette petite fleche mais pour ma part ca ne marche pas la fleche est bien la mais rien ne se passe quand on clike dessus… 🙁
jack
29 janvier 2015 at 15 h 07 minBonjour Charlene,
je voudrais créer la même chose, mais avec un scrolling vers le bas de ma page ou plutôt vers une zone précise, ainsi qu’un bouton placé au centre de ma page web et non à droite ou à gauche.
Merci
Sweet Judas
30 janvier 2015 at 20 h 33 minMerci pour l’astuce, ça a marché du premier coup, c’est trop cooool 😀
Je cherchais justement depuis quelques jours un moyen de faire quelque chose comme ça, étant donné que je n’arrive pas à trouver comment mettre mes articles en mode « extrait » sur la page d’accueil, ça me saoulait de devoir « scroller » en long, en large et en travers 🙂
C’est parfait, merci encore ♥
orelol
17 février 2015 at 15 h 33 minsniffff j’y arrive pas
orelol
17 février 2015 at 15 h 36 minen fait le mien se met pas à droite
la vie ordinaire d'une Bretonne
23 février 2015 at 10 h 13 minOn a le droit aussi d’être flemmarde sur le net ^_^
Merci pour ton astuce.
Can-D
9 mars 2015 at 20 h 52 minj’ai essayé mais y’a un truc qui m’échappe au moment de copier ça ne change rien sur mon blog….
Je suis trop nulle, je viens de commencer alors tout est encore un peu obscure….
Emilie
16 mars 2015 at 15 h 41 minJe t’ai volé celui ci aussi <3
Ton blog est trop beau, je suis totalement jalouse o/
Marine Skyinie
31 mars 2015 at 11 h 03 minCoucou!
j’ai installé le tuto avec les images!
au début je ne trouvais pas les codes html à remplacer car j’ai fait ctrl+f+la phrase dans la page générale et non dans l’encadré des codes html.
Problème réglé! tout est bien installé,
merci mille fois pour tes tutos qui sont clair et très bien expliqué!
N’hésite pas à venir voir mes petites installations grâce à tes tutoriels!
http://luniversdeskyinie.blogspot.fr/
Bisous! ♥
Skyinie
kaylacos
5 avril 2015 at 23 h 00 minCoucou ! c’est génial ! ça un fait un moment que je cherche comment faire. Et c’est fait ! Merci
Garlic and Grenadine
11 avril 2015 at 19 h 29 minMerci pour cette astuce !!! Je suis ravie de pouvoir l’installer sur mon blog !!!
Bon weekend
Marguerite Verte
11 avril 2015 at 23 h 47 minMerci pour l’astuce et le code, très généreux de ta part!
lola
12 avril 2015 at 23 h 24 minJ’ai testé ce tuto aussi rien ce ne se passe 🙁
Virginie Hedenne
14 avril 2015 at 8 h 52 minCoucou ma belle ton blog m’aide bien par ces conseils mais la ma jolie petite flèche ne veut pas apparaître 🙁 SOS !! lol ^^
lembeaute
1 mai 2015 at 14 h 35 minJe viens de le faire, ça marche c’est super ! Merci beaucoup pour tes articles qui donnent pas mal de conseils pour les blog et qui permettent de les améliorer .
Bisous
Sonia
6 mai 2015 at 16 h 29 minBonjour,
J’ai regardé attentivement votre blog que je trouve excellemment bien fait, bien écrit et du coup, tout est beaucoup plus simple car les nulles dans mon genre comprennent tout !
Juste une question sur l’ancre. J’aimerais pour mon blog créer une page de conseils pour écrire mais sur cette me^me page incorporer des menus. Vous voyez ?
Comment faire ?
Merci pour votre retour et vos conseils,
A bientôt,
Sonia
Laura
26 mai 2015 at 5 h 23 minBonjour, j’ai fais exactement tout se qui a été demandé mais malheureusement rien ne s’affiche, je ne sais pas d’où vient le problème.
http://lanouvellelaura.blogspot.fr/
Noor
28 mai 2015 at 11 h 06 minBonjour
J’ai réalisé le tutoriel pour » blogger » mais une fois le gadget installé, rien n’apparaît sur mon blog
J’ai copié ceci dans le gadget HTML/JAVASCRIPT :
Je vois apparaître la flèche noire lorsque je clique sur la mention » FORMAT RTF » mais elle n’apparaît pas sur mon site
Si Luminoé
8 juin 2015 at 14 h 23 minMerci merci merci !! Moi qui suis une quiche en blogging, grâce à toi je rends mon blog acceptable !! Merci tout plein de partager tout ça avec nous !
Drema
14 juin 2015 at 14 h 12 minBonjour ! Merci pour le code et pour les images, c’est vraiment super ! Je suis tombée sur ton blog par hasard comme je viens de créer mon blog et que je le « customize », je file voir le reste de tes articles !
Bonne continuation !
Charles
21 juin 2015 at 20 h 40 minGénial !!!
Super votre blog !!!
MG | Bee Veggie
17 septembre 2015 at 23 h 37 minUn tuto tout facile !! Je suis super contente car ça a très bien fonctionné !! Merci merci merci 😀
Mme Maman
23 septembre 2015 at 9 h 25 minJe vais tester! Merci! 🙂
Tuii
13 octobre 2015 at 23 h 52 minMerci pour ce tuto !
Vraiment facile et j’adore les petites flèches misent à disposition.
La Geek En Rose
18 octobre 2015 at 18 h 31 minMerciiiiii, je l’ai installé sur mon blog. ♥
Peggy
17 décembre 2015 at 22 h 46 minMerci beaucoup pour ce tuto, je viens d’insérer une flèche grise sur mon blog. C’est la première fois que je touche au code de près ou de loin… j’ai même tenté et réussi à passer la flèche à droite. Dingue !
Val ( cookies addicte )
24 décembre 2015 at 10 h 12 minUn grand merci à vous pour vos explications claires , simples et précises !
Cocooning & Co
24 février 2016 at 22 h 11 minSuper, merci beaucoup !
Béa
5 mars 2016 at 9 h 28 minMerci, c’est simple et efficace : Que du bonheur !! LOL
Je m’y mets tout de suite !!
Et bravo pour ce blog 😉
Kelly
21 mars 2016 at 16 h 13 minC’est top! Ca a été un peu laborieux pour moi qui débute sur blog mais j’ai une belle flêche qui renvoie vers le haut de mes pages. Merci pour ton partage :-))).
Kelly
Christine
20 mai 2016 at 7 h 48 minTrouvé la réponse en surfant …. Merciiii 😀
Christine
Anabelle
24 mai 2016 at 13 h 19 minBonjour, je ne vois pas ma petite flèche..lol
Floralie
1 septembre 2016 at 8 h 59 minBonjour,
Je viens de tester et ça ne marche pas je suis sur blogger, j’ai un petit cadre avec une petite feuille dedans ?
Je ne comprends pas ?
Merci à toi de ta réponse, à bientôt !
Pauline
1 novembre 2016 at 15 h 44 minC’est génial tes tutos ! Merci pour ton aide!
Ton site est sublime…
Dear moonlight
6 décembre 2016 at 17 h 22 minMerciiiii ca marche super bien !
Gina0101
21 février 2017 at 16 h 39 minBonjour,
Merci beaucoup pour cet article. Pour ma part, Je n’y arrive pas. J’ai l’impression que je m’y prends mal sans savoir vraiment pourquoi… En tout cas la flèche ne s’affiche pas.
Si tu peux m’aider?
🙂
Gauthier
29 mars 2017 at 11 h 01 minParfait !!! 😀 Je te remercie 🙂
Oriane
20 avril 2017 at 16 h 52 minMerci beaucoup ! C’est génial ça marche super bien !!!
Junior
16 janvier 2018 at 1 h 27 minBonjour,
ça fonctionne très bien Merci c’est Un excellent tutoriel. Je vous en remercie
Gérard
14 avril 2018 at 10 h 53 minBonjour,
J’ai essayé votre astuce et après j’ai supprimé le widget, Mais malheureusement il reste ancré dans ma page !
Avez-vous la solution pour le supprimer totalement ?
Merci par avance
Cordialement