Thème Maevis pour Bear

Bouton "Retour en haut de page"

Ce type de bouton est utile pour améliorer la navigation sur votre blog si vous publiez régulièrement des articles longs.

Pour l'ajouter au thème Maevis procédez de la façon suivante :

  1. Rendez-vous sur Dashboards → Themes → Faites défiler jusqu'à Edit theme CSS

  2. Ajoutez en première ligne de votre feuille de style le code suivant :

html {
scroll-behavior: smooth;
}
  1. Ajoutez ensuite le code suivant, par exemple après la section relative au paragraphes spéciaux :
/* --- BOUTON RETOUR EN HAUT --- */
#back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 3rem;
height: 3rem;
background-color: var(--accent-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 1.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: transform 0.2s, opacity 0.2s;
opacity: 0.8;
z-index: 1000;
border: none;
}

#back-to-top:hover {
transform: translateY(-4px);
opacity: 1;
}

/* Cache le bouton sur les petits écrans s'il gêne la lecture */
@media (max-width: 640px) {
#back-to-top {
bottom: 1rem;
right: 1rem;
width: 2.5rem;
height: 2.5rem;
}
}
  1. Rendez vous ensuite sur Dashboards → Settings → Directives → Footer Directive et ajoutez le code suivant :
<a href="#" id="back-to-top" title="Retour en haut">
  ↑
</a>

<script>
  // Script optionnel pour n'afficher le bouton que lorsqu'on a scrollé
  const btt = document.getElementById('back-to-top');
  btt.style.display = 'none'; // Caché au départ

  window.onscroll = function() {
    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
      btt.style.display = 'flex';
    } else {
      btt.style.display = 'none';
    }
  };
</script>

Et voilà !