Smart Scroll Buttons - Remonter en haut et Descendre en bas avec aperçu en direct

Les pages longues ont besoin d'une sortie

Une catégorie de soixante produits, une colonne de filtres, une page CMS interminable, une liste du back office : le visiteur fait défiler, trouve ce qu'il cherchait, puis doit tout remonter à la main. C'est une petite friction, répétée sur chaque page longue, et il suffit d'un bouton pour l'effacer. Ce module vous en donne deux.

Deux boutons, configurés séparément

• Remonter en haut (Back to Top) apparaît dès qu'un visiteur a fait défiler la page vers le bas. Un clic fait remonter en douceur jusqu'en haut.
• Descendre en bas (Scroll to Bottom) s'affiche tant qu'il reste de la page en dessous. Un clic saute directement à la fin — pratique sur les longues listes et sur les pages où l'essentiel, un formulaire ou un bloc de contact par exemple, se trouve tout en bas.

Il ne s'agit pas d'un même réglage appliqué deux fois. Chaque bouton possède sa propre forme, sa largeur, sa hauteur, sa couleur d'arrière-plan, sa couleur d'icône, ses marges, son z-index et sa vitesse de défilement : vous pouvez en faire une paire assortie ou deux boutons volontairement différents. À noter que l'animation d'apparition, elle, est un réglage du bouton Remonter en haut.

Un aperçu en direct plutôt que des suppositions

La page des paramètres affiche les boutons pendant que vous les configurez. Changez la forme, déplacez le curseur de couleur, ajustez la taille : l'aperçu se met à jour immédiatement. Fini le cycle enregistrer, ouvrir la boutique, recharger, revenir. C'est toute la différence entre obtenir le bon rendu du premier coup et y arriver au cinquième essai.

Forme, couleur et position

Choisissez cercle (circle) ou carré arrondi (rounded square). Définissez la largeur et la hauteur, les couleurs d'arrière-plan et d'icône, ainsi que la distance aux bords de l'écran : marge droite et marge inférieure pour Remonter en haut, marge droite et marge supérieure pour Descendre en bas. Un réglage de z-index détermine les éléments au-dessus desquels le bouton se place, ce qui compte lorsqu'un thème dispose d'un en-tête collant, d'un bandeau cookies ou d'une bulle de chat qui se disputent le même coin de l'écran.

Le mouvement, à votre main

Le bouton Remonter en haut possède une animation d'apparition qui définit sa façon d'arriver au fil du défilement : Fondu (fade), Rotation (spin), Rotation inverse (spin-inverse), Zoom (zoom) ou Aucune (none) s'il doit simplement s'afficher. La vitesse de défilement, réglée séparément sur chaque bouton, s'exprime en millisecondes — plus la valeur est élevée, plus le mouvement est lent et fluide — pour un retour en haut aussi net qu'un claquement de doigts ou aussi doux qu'un glissement.

Boutique, back office, ou les deux

Deux interrupteurs indépendants. Affichez les boutons à vos clients sur la boutique, à votre équipe dans le panneau d'administration, ou aux deux. Les listes de produits et les longues pages de réglages du back office profitent d'un bouton Remonter en haut tout autant qu'une page catégorie.

Tout est validé

Les couleurs doivent être de vraies couleurs, les champs numériques des nombres entiers supérieurs ou égaux à zéro, et les listes d'options n'acceptent que les valeurs prévues. Toute saisie invalide est refusée à l'enregistrement, avec un message qui nomme le champ et la valeur en cause — "#GGG" is not a valid color plutôt qu'un échec silencieux ou un bouton cassé.

Compatibilité

PrestaShop 1.7, 8 et 9, en huit langues : allemand, anglais, espagnol, français, italien, néerlandais, polonais et turc. Les boutons sont générés par le gabarit et la feuille de style du module, avec la police d'icônes embarquée plutôt que chargée depuis un CDN tiers : aucune ressource externe n'est appelée et les boutons s'affichent même si un CDN est injoignable.

Questions fréquentes

Puis-je n'utiliser que le bouton Remonter en haut ?

Oui. Les deux boutons se configurent indépendamment : activez l'un, l'autre, ou les deux ensemble.

Va-t-il entrer en conflit avec mon en-tête collant ou ma bulle de chat ?

C'est précisément le rôle du z-index : augmentez-le pour passer devant l'élément concurrent, réduisez-le pour passer derrière. Les marges vous permettent aussi de déplacer complètement le bouton.

Dois-je enregistrer pour voir le rendu ?

Non. La page des paramètres montre les deux boutons en direct pendant que vous modifiez la forme, la taille et les couleurs.

Puis-je aussi l'afficher dans le back office ?

Oui, c'est un réglage distinct. Les longues listes de l'administration en profitent autant que la boutique.

Comment rendre le défilement plus lent et plus fluide ?

Augmentez la valeur de vitesse de défilement. Elle est exprimée en millisecondes : plus le nombre est élevé, plus le glissement est long et doux.

Quelles formes sont disponibles ?

Cercle et carré arrondi, chacune avec sa propre largeur et sa propre hauteur.

Le module charge-t-il quelque chose depuis un serveur externe ?

Non. La police d'icônes est livrée avec le module : rien n'est récupéré sur un CDN et les boutons s'affichent même si celui-ci est bloqué.