Ajouter un bouton "haut de page" au scroll

Hello hello

Aujourd'hui, je te propose une petite astuce pour afficher une flèche "retour en haut de page" uniquement quand tu commences à faire défiler ta page vers le bas.

Pré-requis :

• Avoir accès aux templates,
  
• Des connaissances en CSS sont un plus (positionnements, mises en page de bloc & animations).

Cette astuce fonctionne pour toutes les versions de forum.

Pour ce tutoriel, les templates sont ceux par défaut, c'est-à-dire non modifiés.


Eh bien oui Quelque soit la version de ton forum, tout se passe dans ce template.

Nous allons donc commencer par l'ouvrir en allant dans : Panneau d'administration > Affichage > Templates > Général.

Juste avant

Code:

</body>

nous allons ajouter ce code :

Code:

<a href="#" class="back-to-top m-d-none">↑</a>

On sauvegarde et on publie.


Bon ! Pour le moment, notre flèche est tout en bas à gauche, à peine visible. Essayons d'améliorer ça ^^
Pour cela, nous allons aller dans Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS et voici la CSS à y mettre :

Code:

/*** --- BACK TO TOP --- ***/
.m-d-none{display: none;}

.back-to-top{
  --mcolor1: #a49689; /* Couleur claire */
  --mcolor2: #2b302a; /* Couleur foncée */

  align-items: center;
  background: var(--mcolor1);
  box-shadow: 1px 1px 10px var(--mcolor1);
  bottom: 10px; /* Position de l'élement par rapport au bord du bas */
  color: var(--mcolor2) !important;
  cursor: pointer;
  display: flex;
  font-size: 20px; /* Taille de la typo */
  height: 40px; /* Hauteur du bloc */
  justify-content: center;
  opacity: 0;
  position: fixed;
  right: 10px; /* Position de l'élement par rapport au bord droit */
  text-decoration: none !important;
  transition: all ease-in-out .5s;
  width: 30px; /* Largeur du bloc */
  z-index: 99;
}

.back-to-top.show{
  opacity: 1 !important;
}

.back-to-top.anim-show{
  animation: 1s showBtnTop; /* 1s = la vitesse de l'animation */
  opacity: 0;
}

.back-to-top.anim-hide{
  animation: 1s hideBtnTop; /* 1s = la vitesse de l'animation */
  opacity: 1;
}

.back-to-top:hover{
  background: var(--mcolor2);
  color: var(--mcolor1) !important;
  text-decoration: none !important;
  transition: all ease-in-out .5s; /* 0.5s = la vitesse de la transition */
}

/* Animation qui fait apparaitre la flèche en fondu au scroll */
@keyframes showBtnTop {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Animation qui fait disparaitre la flèche en fondu au scroll */
@keyframes hideBtnTop {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

Celle-ci est commentée pour que tu puisses la modifier facilement.

N'oublie pas de sauvegarder.


Il ne nous reste plus qu'à ajouter le javascript qui va ajouter les classes CSS, le clic ainsi que les animations.

Pour cela, on va aller dans Panneau d'administration > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.

On va créer un nouveau javascript qu'on va afficher sur toutes les pages et on va y mettre ceci :

Code:

;(function($) {
   
    // Fonction pour ajouter des délais
    async function waitForTime(ms) {
        return new Promise(r => setTimeout(r, ms));
    }

    // Au scroll, afficher bouton "back to top"
    $(window).on('load scroll', async function () {
        var scrolled = $(this).scrollTop(),
            $top = $('.back-to-top');
       
        // Si on n'est pas en haut de la page
        if(scrolled > 0){
            // Si la flèche n'est pas déjà visible
            if(!$top.hasClass('show')){
                // Dans ce cas, on l'affiche en fondu
                $top.removeClass('m-d-none')
                .addClass('anim-show');

                await waitForTime(400);
                $top.addClass('show')
                    .removeClass('anim-show');
            }
        // Si on est en haut de la page
        }else{
            // On cache la flèche
            $top.addClass('anim-hide')
                    .removeClass('show');

            await waitForTime(400);
            $top.addClass('m-d-none')
                .removeClass('anim-hide');
        }
    });

    $(document).ready( function(){

        $('body')
            // Au clic sur la flèche
            .on('click', '.back-to-top', function(e){
                e.preventDefault();
                var cible ;
                // On teste si on est sur AwesomeBB
                if( $('body').attr('id') === 'top'){
                    cible = '#top';
                }else{
                    cible = 'a[name="top"]';
                }
                // On joue une animation pour retourner en haut de page
                $('html, body').animate({
                    scrollTop: $(cible).offset().top
                }, 1500);
            });

    });
   
})(jQuery);

Le javascript est commenté pour que tu puisses le comprendre.

Logiquement, tu n'as rien à modifier ici

---

Si jamais tu as un souci pour mettre en place ce tutoriel, n'hésite pas à détailler ton problème à la suite de ce message.