Skip to main content

Aujouter un bouton "back to top"

Si votre site web possède de longues pages, il peut être utile d’afficher un bouton pour retourner rapidement en haut de page. Ce bouton sera invisible au début de votre lecture puis apparaîtra quand vous ferez défiler la page vers le bas. En règle générale, ce bouton apparaît au moment où le menu n’est plus visible. Le thème Mercury n’est pas équipé de cette fonctionnalité. Je vous propose cette manipulation grâce à laquelle Publii ajoutera un icône “Back to top” à chacune de vos pages(cf https ://www.ksite.de/).

Il s’agira de simples copier/coller dans des espaces dédiés, vous n’aurez aucune programmation à effectuer.

Voici une rapide présentation des 3 éléments qui structurent un site web :

  1. Le HTML permet de créer la structure d’un site web. HTML (HyperText Markup Language) est le langage de base utilisé pour créer des pages web. Toutes les pages web sont au format HTML.
  2. Les CSS (Cascading Style Sheets, ou en français, feuilles de style en cascade) est un langage qui permet de définir l’apparence de vos éléments HTML. Une feuille de style CSS est utilisée pour styliser et mettre en forme les pages Web créées avec HTML. C’est un peu la décoration de votre blog.
  3. Le JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives. Le JavaScript est présent sur presque tous les sites Web fonctionnels. Il les rend dynamiques et interactifs.

Si votre site web était une maison, HTML serait l’archi, CSS le décorateur, JavaScript serait la domotique. Dans le menu de Publii, choisissez “Outils et plugins”. C’est là que nous allons ajouter quelques instructions.

Les 3 parties à ajouter

HTML

Des balises HTML pour dessiner le bouton et la flèche vers le haut. Ce bouton est dessiné en SVG ( Scalable Vector Graphics) à l'aide d'un langage dédié.

<button onclick="scrollToTop()" id="scrollTopBtn" title="Back to top">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<polyline points="18 15 12 9 6 15" fill="none"
stroke="gray" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</button>

Javascript

Du code JavaScript pour définir le comportement ce bouton.

<script>
// Show button when scrolling down
const scrollTopBtn = document.getElementById("scrollTopBtn");
window.onscroll = function () {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100)
{
scrollTopBtn.classList.add("show");
} else {
scrollTopBtn.classList.remove("show");
}
};
function scrollToTop() {
window.scrollTo({ top: 0, behavior: "smooth" });
}
</script>

CSS

Une feuille de style pour que l’ensemble soit joli.

#scrollTopBtn {
position: fixed;
bottom: 20px;
right: 20px;
background-color: white; /* Weißer Hintergrund */
border: 2px solid gray; /* Grauer Rand */
border-radius: 50%; /* Rund */
width: 50px;
height: 50px;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
padding: 0;
transition: background-color 0.3s;
}
#scrollTopBtn:hover {
background-color: #f0f0f2; /* Blau bei Hover */
}
#scrollTopBtn.show {
display: flex; /* Sichtbar machen */
}
#scrollTopBtn svg {
width: 24px;
height: 24px;
display: block;
}

Ajout de HTML et de CSS

Dans le menu “Outils et Plugins”, cliquez sur “HTML personnalisé”. Puis, à gauche cliquez sur “Bas de page” (voir figure 21). C’est ici que nous allons ajouter le code HTML ainsi que le les feuilles de style. Dans la page qui vient de s’ouvrir, collez le texte situé dans la boite HTML. Puis, à la suite collez le code JavaScript, sans en modifier le contenu. N’oubliez pas d’enregistrer votre travail avant de cliquer sur “Retour aux outils”.

fig21.png

Figure 21 – Insertion de commandes personnalisées : HTML et CSS

Ajout de la feuille de style

Il ne reste plus qu’à copier le code CSS (les feuilles de styles) dans le bon espace. À nouveau, rendez vous dans la partie “Outils et plugins”. Cliquez sur le bouton “CSS personnalisé”. Collez le code CSS dans la page qui vient de s’ouvrir (voir figure 22). N’oubliez pas de sauvegarder votre travail avant de prévisualiser votre blog.

fig22.png

Figure 22 – Insertion de code CSS personnalisé

Il ne reste plus qu'à tester l'apparition de cette flèche siur votre blog. En cas de mauvais fonctionnement, vérifiez que les codes que vous avez copiés correspondent bien à ceux qui vous sont proposés, sans caractères parasites.

Back to top