Blog

Comment ajouter un bouton de retour en haut de page dans Wix

Date de la dernière mise à jour : 
Comment ajouter un bouton de retour en haut de page dans Wix

Comment faites-vous vos recherches sur Internet ? Il y a de fortes chances que ce soit sur votre téléphone. En juillet 2026, StatCounter indique que la navigation mobile représente 52,57 % du trafic web mondial, devant les 45,93 % de l’ordinateur de bureau. Mais la navigation sur mobile pose des difficultés, notamment à cause des longues pages condensées dans un espace d’écran restreint.

Les développeurs web avisés utilisent un bouton de retour en haut de page pour y remédier. Mais si vous gérez vous-même votre site sur une plateforme comme Wix, vous ne connaissez peut-être pas toutes les fonctionnalités essentielles en matière d’ergonomie. 

Ajouter un bouton de retour en haut de page n’a rien de compliqué. Wix vous propose trois solutions pratiques : en créer un manuellement à partir des éléments natifs de l’éditeur, installer une appli depuis le Wix App Market, ou intégrer un widget HTML intelligent et gratuit. Nous vous guidons pas à pas dans ces trois options et nous vous expliquons pourquoi la solution du widget est généralement la meilleure.

À savoir avant de commencer

Le Nielsen Norman Group recommande d’ajouter un bouton de retour en haut de page dès que celle-ci dépasse environ quatre écrans, de le placer en bas à droite et de l’accompagner d’un libellé plutôt que d’une simple icône. Sur un long article de blog ou un portfolio, il permet réellement de gagner du temps.

Option 1 : utiliser un bouton épinglé natif de Wix

Vous pouvez créer vous-même un bouton de retour en haut de page dans l’éditeur Wix en deux minutes environ, sans appli ni code. Le principe est simple : ajoutez une flèche ou une icône, associez-la à un lien vers le haut de la page, puis épinglez-la à l’écran pour qu’elle suive le visiteur lorsqu’il fait défiler la page. Wix détaille cette procédure dans son centre d’aide.

1. Ajoutez l’élément : dans l’éditeur Wix, cliquez sur Ajouter des éléments, ouvrez Graphiques, puis Formes de base, sélectionnez Flèches et faites glisser une flèche sur votre page. Les boutons à icône et les illustrations vectorielles fonctionnent tout aussi bien si vous souhaitez un rendu plus personnalisé à l’image de votre marque.

Panneau Ajouter des éléments de l'éditeur Wix affichant les formes de flèches disponibles dans Graphiques

2. Associez-le à un lien vers le haut de la page : sélectionnez l’élément, cliquez sur l’icône Lien, choisissez Haut/Bas de la page, sélectionnez Haut, puis cliquez sur Terminé.

Panneau des paramètres de lien de l'éditeur Wix pour configurer un bouton de retour en haut de page

3. Épinglez-le à l’écran : faites un clic droit sur l’élément et choisissez Épingler à l’écran. Sélectionnez la cellule en bas à droite de la grille de positionnement, puis utilisez les curseurs de décalage horizontal et de décalage vertical pour l’écarter légèrement de votre contenu. Activez l’option Afficher sur toutes les pages pour qu’il apparaisse sur l’ensemble du site.

Menu contextuel de l'éditeur Wix mettant en évidence l'option Épingler à l'écran

C’est une bonne solution gratuite, mais elle présente un inconvénient majeur : le bouton est toujours visible. Les éléments épinglés de Wix n’ont pas de seuil de défilement. Votre flèche reste donc affichée, ne pointant vers rien, même lorsque le visiteur se trouve déjà tout en haut de la page. La documentation de Wix précise d’ailleurs que les éléments épinglés peuvent masquer du contenu sur les petits écrans, là où l’on supporte le moins d’encombrement.

Pour que le bouton n’apparaisse qu’une fois que le visiteur a fait défiler la page, il faut écrire du code personnalisé avec Velo by Wix, l’environnement de développement de la plateforme. Cela implique du JavaScript, des gestionnaires d’événements et une session de débogage, ce qui est bien loin de l’expérience sans code que la plupart des propriétaires de sites Wix recherchaient.

Deux précisions avant d’écarter cette option :

  • Sur mobile, Wix propose un outil intégré gratuit : l’éditeur mobile inclut un bouton Retour en haut dans les Outils mobiles. Il n’apparaît que sur les pages utilisant la mise en page Standard et mesurant au moins 1 380 pixels de long, et il ne fonctionne que sur mobile. 
  • Les utilisateurs de Wix Studio disposent d’une solution de contournement partielle : Wix suggère d’ajouter une animation d’entrée avec un délai afin que le bouton apparaisse en fondu peu après que le visiteur a commencé à faire défiler la page. 

Option 2 : installer une extension du Wix App Market

Pour résoudre le problème du bouton toujours visible, de nombreux propriétaires de sites Wix se tournent vers l’App Market et recherchent des outils tels que « Scroll to Top ». Ces applis intègrent des déclencheurs basés sur la profondeur de défilement : le bouton reste donc masqué tant que le visiteur n’a pas parcouru une certaine distance sur la page, et la plupart proposent des paramètres distincts pour ordinateur et mobile.

Le hic, c’est que les paramètres souhaités sont souvent réservés à une offre payante. Voici une comparaison des deux options les plus visibles :

AppliDéveloppeurFonctionnalités de l'offre gratuiteFonctionnalités de l'offre payante

Scroll to Top Button

Tornado

Vues et clics illimités, design et mise en page personnalisables, paramètres de défilement

Offre Pro à partir de 2,20 $/mois (facturation annuelle) ; bibliothèque d’icônes étendue et import d’icônes personnalisées, indicateur de progression du défilement, animations avancées, paramètres d’affichage selon l’appareil

Back to Top

PurpleBear

Installation gratuite, essai gratuit de 3 jours

Tarification selon l’utilisation à partir de 6 $/mois

Dans l’appli de Tornado, l’import d’icônes personnalisées et les paramètres d’affichage selon l’appareil, deux des réglages que vous voudrez le plus probablement modifier, sont réservés à l’offre Pro. L’appli de PurpleBear est gratuite à installer, mais passe à une facturation selon l’utilisation après un essai de trois jours. Aucune des deux n’est chère en soi. Le problème, c’est qu’il s’agit d’une ligne de dépense récurrente de plus, ainsi que d’un script tiers à charger sur chaque page de votre site.

1. Ouvrez l’App Market : dans votre éditeur Wix, cliquez sur Applis dans la barre latérale de gauche, puis sur Accéder à l’App Market, et recherchez « scroll to top ».

Résultats de recherche du Wix App Market pour les applis de bouton de retour en haut de page

2. Ajoutez l’appli à votre site : ouvrez la fiche de l’appli, consultez la section Tarifs et offres pour vérifier que l’offre inclut les fonctionnalités souhaitées, puis cliquez sur Ajouter au site.

3. Configurez le bouton : ouvrez les Paramètres et définissez votre seuil de profondeur de défilement, la position à l’écran, l’icône et les éventuelles règles propres à chaque appareil. Publiez votre site et testez le bouton à la fois sur un navigateur de bureau et sur un téléphone.

Option 3 : utiliser un widget gratuit de bouton de retour en haut de page (recommandé)

Si vous souhaitez un bouton flottant avec seuil d’apparition, sans abonnement mensuel à une appli ni code Velo, la meilleure solution est un widget externe gratuit. Le widget Retour en haut de page de Jotform a été conçu pour cela. Configurez le bouton dans votre navigateur, copiez le code d’intégration, collez-le dans un élément HTML de Wix, puis épinglez-le à l’écran.

Générateur du widget Retour en haut de page de Jotform affichant les paramètres de style et de comportement

1. Créez votre bouton : ouvrez la page du widget Retour en haut de page et cliquez sur Créer un widget de site web. Dans le panneau Général, activez l’option Afficher le libellé si vous souhaitez ajouter du texte à côté de l’icône, réglez Afficher après le défilement pour contrôler le moment où le bouton apparaît, puis choisissez une Animation de défilement.

Aperçu du widget Retour en haut de page de Jotform configuré avec un bouton flottant

Pro Tip

Utilisez les panneaux Styles et Mise en page pour personnaliser les couleurs, l’icône, le rayon des angles, la position du bouton, sa taille, l’espacement et les appareils sur lesquels le widget s’affiche.

2. Copiez le code d’intégration : cliquez sur Essayer gratuitement sur votre site web et copiez le code généré.

Générateur du widget Retour en haut de page de Jotform affichant les paramètres de mise en page et le code d'intégration à copier

3. Intégrez-le dans Wix : dans l’éditeur Wix, cliquez sur Ajouter des éléments, choisissez Code d’intégration, puis Intégrer du HTML. Collez votre code dans le champ HTML et cliquez sur Mettre à jour. Faites un clic droit sur l’élément HTML, sélectionnez Épingler à l’écran et placez-le dans le coin inférieur droit. Publiez votre site et testez le comportement du défilement sur ordinateur et sur mobile.

Éditeur Wix affichant un élément HTML intégré et épinglé à l'écran

Cette option réunit tous les avantages à la fois : un véritable seuil de défilement, un contrôle total du design et aucun coût récurrent. Vous définissez la distance de défilement, de sorte que le bouton n’apparaît que lorsqu’il est utile. Vous choisissez le style et la position à l’écran, plutôt que de vous contenter d’un réglage par défaut sans mise en forme. Et vous décidez si le bouton s’affiche sur ordinateur, sur mobile ou sur les deux.

Elle présente aussi un avantage en termes de portabilité. Comme il s’agit d’un code d’intégration et non d’une appli Wix, la même configuration de widget fonctionne sur WordPress, sur Shopify et sur n’importe quel site qui accepte du HTML personnalisé. Si vous quittez un jour Wix, votre bouton vous suit. Pour découvrir la procédure complète avec des captures d’écran, consultez notre guide sur comment ajouter un bouton de retour en haut de page à votre site web.

Enrichissez votre site Wix avec des widgets intelligents et sans code

Le widget Retour en haut de page fait partie des plus de 150 widgets gratuits pour site web du répertoire de Jotform, et la configuration est toujours la même : vous le paramétrez dans votre navigateur, copiez le code d’intégration, puis le collez dans un élément HTML de Wix. Pas d’abonnement à une appli, pas de Velo, pas besoin de développeur, ce qui compte beaucoup pour un site Wix. Chaque installation depuis l’App Market ajoute un script supplémentaire et, souvent, des frais mensuels de plus. Les widgets vous permettent d’ajouter de vraies fonctionnalités sans ces contraintes, et c’est ce qui fait la différence entre un site qui reste rapide et un site qui ne l’est plus.

Voici quelques widgets à associer à votre bouton de retour en haut de page sur un site à long défilement :

  • Widget Accessibilité : il permet aux visiteurs d’ajuster le contraste, la taille du texte, l’espacement et les animations, et il mémorise leurs préférences.
  • Widget FAQ : cet accordéon avec recherche condense un long contenu d’assistance dans un bloc compact.
  • Compte à rebours : il est utile sur une page de lancement, de soldes ou d’inscription à un événement, où l’urgence pousse à l’action.
  • Widget Pop-up : il est idéal pour les inscriptions à une newsletter, les annonces et les offres de dernière minute, sans qu’il soit nécessaire d’installer une appli de pop-up dédiée.
  • Widget QR code : il est pratique pour les menus de restaurant, l’enregistrement à un événement et tout contenu auquel vous souhaitez donner accès à vos visiteurs.

Si vous êtes encore en train de construire votre site, notre guide pour créer un site Wix aborde la structure, les modèles et les choix de design. Et quand vous serez prêt à collecter des prospects, des réservations ou des paiements, l’intégration Jotform + Wix vous permet d’intégrer un formulaire entièrement personnalisé grâce au même élément Intégrer du HTML que celui que vous venez d’utiliser.

Explorez le répertoire de widgets gratuits de Jotform pour découvrir ce que vous pouvez ajouter d’autre à votre site Wix sans sacrifier ses performances.

Cet article s’adresse aux propriétaires de sites Wix, aux blogueurs et aux créateurs de portfolios dont les pages à long défilement nécessitent d’améliorer la navigation et l’expérience utilisateur, sans ralentir leur site ni payer pour des applis.

Envoyer un commentaire:

Jotform Avatar
Ce site est protégé par reCAPTCHA, et les Politique de confidentialité et Conditions de service de Google s'appliquent.

Podo Comment Soyez le premier à commenter.