Le deal à ne pas rater :
Obtenez jusqu’à -50 % sur les meilleures ventes ASOS
Voir le deal

Aller en bas
Miettes
Miettes
Râleuse (Admin)
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2153

Ajouter un bouton "haut de page" au scroll Empty Ajouter un bouton "haut de page" au scroll

le Ven 5 Juin 2020 - 8:08

Toutes versions

Ajouter un bouton "haut de page" au scroll

Hello hello Smile

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.

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

Idea Cette astuce fonctionne pour toutes les versions de forum.

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

Modifier le template "overall_footer_end"

Eh bien oui Smile 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>

Arrow On sauvegarde et on publie.

De la CSS

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;
  }
}

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

Arrow N'oublie pas de sauvegarder.

Et pour finir du JavaScript

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);

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

Logiquement, tu n'as rien à modifier ici Smile




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.



_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses