Ajouter un bouton « Retour en haut »

Par Franck, . Lien permanent Brèves

Il y a un ticket ouvert au sujet d’une fonctionnalité du thème Berlin qui serait souhaitée sur un autre thème. En attendant que celui soit fermé, voilà ce qu’il faut pour ajouter cette fonctionnalité à votre thème.

Deux choses, la première créer un fichier gotop.js dans un dossier js1 de votre thème, la seconde un ajout à faire, avec l’éditeur de thème dans le fichier user_footer.html.

Pour le premier, copiez-collez le code suivant :

document.addEventListener('DOMContentLoaded', () => {
  // totop init
  const gotop_btn = document.getElementById('gotop');
  const gotop_link = document.querySelector('#gotop a');
  gotop_link.setAttribute('title', gotop_link.textContent);
  gotop_link.innerHTML =
    '<svg width="24px" height="24px" viewBox="1 -6 524 524" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M460 321L426 355 262 192 98 355 64 321 262 125 460 321Z"></path></svg>';
  gotop_btn.style.width = '32px';
  gotop_btn.style.height = '32px';
  gotop_btn.style.padding = '3px 0';

  // totop scroll
  window.addEventListener('scroll', () => {
    if (document.querySelector('html').scrollTop === 0) {
      gotop_btn.classList.add('hide');
      gotop_btn.classList.remove('show');
    } else {
      gotop_btn.classList.add('show');
      gotop_btn.classList.remove('hide');
    }
  });
  gotop.addEventListener('click', (e) => {
    const isReduced =
      window.matchMedia(`(prefers-reduced-motion: reduce)`) === true ||
      window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
    if (!!isReduced) {
      document.querySelector('html').scrollTop = 0;
    } else {
      function scrollTo(element, to, duration) {
        const easeInOutQuad = (time, ease_start, ease_change, ease_duration) => {
          time /= ease_duration / 2;
          if (time < 1) return (ease_change / 2) * time * time + ease_start;
          time--;
          return (-ease_change / 2) * (time * (time - 2) - 1) + ease_start;
        };
        let currentTime = 0;
        const start = element.scrollTop;
        const change = to - start;
        const increment = 20;
        const animateScroll = () => {
          currentTime += increment;
          element.scrollTop = easeInOutQuad(currentTime, start, change, duration);
          if (currentTime < duration) {
            setTimeout(animateScroll, increment);
          }
        };
        animateScroll();
      }
      scrollTo(document.querySelector('html'), 0, 800);
    }
    e.preventDefault();
  });
});

Avec une petite cerise sur le gâteau qui est que si le visiteur a choisi de réduire les animations alors le retour en haut de page ce fera sans défilement doux.

Pour le second, insérez les lignes suivantes2 :

<p id="gotop"><a href="#prelude">{{tpl:lang Page top}}</a></p>
<script src="{{tpl:BlogThemeURL}}/js/gotop.js"></script>

C’est tout :-)

  1. Dossier à créer s’il n’existe pas. ↩︎

  2. On peut remplacer {{tpl:lang Page top}} par n’importe quel libellé de son choix, Haut de page, par exemple ↩︎

Ajouter un commentaire

Les champs suivis d'un * sont obligatoires

Les commentaires peuvent être formatés en utilisant la syntaxe Markdown Extra.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/15771

Haut de page