Comment créer un bouton "Retour en haut" personnalisé pour Blogger, avec un indicateur de progression de lecture.
⭐⭐🔧⭐⭐
Deb de A Scrappy Quilter est une fidèle participante de ma link party, partageant régulièrement ses réalisations, depuis 2021 ! En suivant le lien vers son article ce week-end, j'ai remarqué le bouton "retour haut de page" qu'elle avait ajouté à son blog.
Il sert à remonter directement au sommet de la page, en un clic. Brillante idée !
Deb from A Scrappy Quilter is a loyal participant in my link party, regularly sharing her quilting projects, since 2021! Following the link to her post this weekend, I noticed the "back to top" button she'd added to her blog.
It takes you straight to the top of the page, with just one click. Brilliant idea!
Avez-vous repéré le mien, en bas à droite ?
Si vous aussi vous en voulez un, voilà comment faire.
Did you spot mine, bottom right?
If you'd like one too, here's how.
⭐⭐🚧⭐⭐
Le bouton prêt à être intégré que je vous propose :
- Apparaît dès qu'on scrolle vers le bas
- Affiche un cercle de progression blanc dynamique (mise à jour en temps réel du % de lecture)
- Est totalement personnalisable (couleur, forme, etc.)
- Affiche un cercle de progression blanc dynamique (mise à jour en temps réel du % de lecture)
- Est totalement personnalisable (couleur, forme, etc.)
- S'insère facilement dans un gadget HTML/JavaScript depuis "Mise en page" (peu importe où vous le mettez, sans titre il reste invisible).
The ready-to-integrate button I'm proposing:
- Appears as soon as you scroll down
- Displays a dynamic white progress circle (real-time update of % read)
- Fully customizable (color, shape, etc.)
- Can be easily inserted into an HTML/JavaScript gadget from “Layout” (no matter where you put it, without a title it remains invisible).
- Appears as soon as you scroll down
- Displays a dynamic white progress circle (real-time update of % read)
- Fully customizable (color, shape, etc.)
- Can be easily inserted into an HTML/JavaScript gadget from “Layout” (no matter where you put it, without a title it remains invisible).
Pour l'instant, c'est un bouton rond violet (#802295), avec un chevron blanc au centre, et une bordure circulaire blanche qui se remplit automatiquement selon la progression de lecture de la page.
Comme dit plus haut, tout est modifiable !
Voilà le code à copier coller dans un gadget HTML/JavaScript :
For the moment, it's a round purple button (#802295), with a white chevron in the center, and a white circular border that fills in automatically as the page is read.
As mentioned above, everything is customizable!
Here's the code to copy and paste into an HTML/JavaScript gadget:
<style>
.back-to-top {
position: fixed;
bottom: 20px; /* 🔧 Distance depuis le bas de l'écran / Distance from bottom of screen */
right: 20px; /* 🔧 Distance depuis le bord droit / Distance from right edge */
width: 60px; /* 🔧 Taille du bouton (largeur) / Button width */
height: 60px; /* 🔧 Taille du bouton (hauteur) / Button height */
border-radius: 50%; /* 🔧 Forme ronde du bouton / Circular shape */
background-color: #802295; /* 🔧 Couleur principale / Main background color */
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9999;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 🔧 Ombre du bouton / Button shadow */
transition: transform 0.3s ease, background-color 0.3s ease;
}
.back-to-top:hover {
transform: translateY(-5px); /* 🔧 Animation au survol / Hover animation */
background-color: #6e1d80; /* 🔧 Couleur au survol / Hover background color */
}
.back-to-top svg.icon {
width: 24px; /* 🔧 Taille du chevron / Chevron size */
height: 24px;
fill: #ffffff; /* 🔧 Couleur du chevron / Chevron color */
position: relative;
z-index: 2;
}
.progress-ring {
position: absolute;
width: 60px; /* 🔧 Taille du cercle / Circle size */
height: 60px;
z-index: 1;
}
.progress-ring circle {
fill: none;
stroke: white; /* 🔧 Couleur du trait de progression / Progress stroke color */
stroke-width: 4; /* 🔧 Épaisseur du trait / Stroke thickness */
stroke-linecap: round;
transform: rotate(-90deg); /* Départ en haut / Start at top */
transform-origin: center;
}
</style>
<!-- Composant HTML / HTML component -->
<div class="back-to-top" id="backToTop" aria-label="Retour en haut / Back to top">
<svg class="progress-ring" width="60" height="60"> /* 🔧 Taille du bouton / Button size */
<circle id="progressCircle" r="26" cx="30" cy="30" /> /* 🔧 r = rayon ; cx/cy = position centre du cercle (ajuster selon taille bouton) / r = radius; cx/cy = circle center position (adjust according to button size) */
</svg>
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 8.59l-6.3 6.3a1 1 0 0 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L12 8.59z"/>
</svg>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const backToTop = document.getElementById("backToTop");
const progressCircle = document.getElementById("progressCircle");
const radius = progressCircle.r.baseVal.value; /*🔧 Rayon du cercle / Circle radius */
const circumference = 2 * Math.PI * radius;
const offset = 100; /*🔧 Seuil d'affichage (scroll) / Display threshold (scroll) */
progressCircle.style.strokeDasharray = circumference + " " + circumference;
progressCircle.style.strokeDashoffset = circumference;
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
progressCircle.style.strokeDashoffset = offset;
}
window.addEventListener("scroll", function () {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrollPercent = Math.min(100, Math.round((scrollTop / scrollHeight) * 100));
setProgress(scrollPercent);
if (scrollTop > offset) {
backToTop.style.display = "flex"; /*🔧 Afficher le bouton / Show the button */
} else {
backToTop.style.display = "none"; /*🔧 Cacher le bouton / Hide the button */
}
});
backToTop.addEventListener("click", function (e) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: "smooth" }); // /*🔧 Défilement fluide / Smooth scroll to top */
});
});
</script>
Personnalisation : les codes surlignés en jaune sont les couleurs à ajuster en fonction de vos préférences. Voir ici le code HEX à copier coller en remplacement (par exemple noir : #000000 et gris clair : #eceff1).
Les commentaires en face des lignes de code indiquent ce qui peut être changé selon vos goûts.
Dites-moi si tout se passe bien !
(code vérifié et amélioré par IAg)
Customization : the codes highlighted in yellow are the colors to be adjusted according to your preferences. See here the HEX code to copy and paste as a replacement (for example black: #000000 and light grey: #eceff1).
The comments next to the lines of code indicate what can be changed according to your preferences.
Let me know how it goes!
(code verified and improved by generative AI)The comments next to the lines of code indicate what can be changed according to your preferences.
Let me know how it goes!
------------------------❤-------------------------
🔗 Rejoignez-moi du samedi au mercredi pour
Join me from Saturday to Wednesday for
------------------------❤-------------------------
⭐⭐☕⭐⭐
Thank you for visiting!
😘 Frédérique
Commentaires
je trouve que c'est une bonne idée, ça me manque souvent sur les blogs !
To see it, first, the button is programmed to appear after a certain amount of scrolling (the display threshold setting, here 100), so you can't see it until you have scrolled a little. I tested it on several browsers and it works for me.
Secondly, to see it, you also need to see the column on the right-hand side (with my profile and more) as the button is just on the right of this column. To see it, reduce the size of your window (Ctrl + -).
Tell me if you can view it now!