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

Vos clients vous remercieront d’avoir ajouté un bouton retour en haut de page dans Squarespace. Mais  cette fonctionnalité est un peu plus compliquée qu’il n’y paraît. Squarespace ne dispose pas d’un bouton retour en haut de page natif. Vous devrez contourner ce problème avec un widget sans code, un peu de code personnalisé ou un lien d’ancrage.

Cela vaut absolument la peine. Les pages de destination longues et les articles de blog approfondis laissent les visiteurs bloqués au bas d’un long défilement. Sur mobile, où se déroule aujourd’hui l’essentiel de la navigation, remonter tout en haut à coups de pouce est un moyen rapide de perdre l’attention d’un visiteur. 

Un bouton retour en haut de page incite les gens à continuer de parcourir votre site au lieu de le quitter. C’est un petit ajustement de navigation qui s’inscrit dans une stratégie plus large pour créer un site web qui garde réellement les gens engagés.

Ce guide présente d’abord la méthode sans code la plus simple, puis couvre deux alternatives pour quiconque souhaite un meilleur contrôle de la conception ou une option intégrée simplifiée.

La méthode la plus simple : utiliser un widget retour en haut de page pour Squarespace

L’option la plus rapide consiste à trouver un widget retour en haut de page prêt à l’emploi. Par exemple, le widget Retour en haut de page de Jotform est un outil gratuit et sans code qui peut mettre ces boutons en ligne sur vos pages en seulement quelques minutes. Vous pouvez l’utiliser pour concevoir un bouton flottant, générer un code d’intégration et le déposer dans Squarespace sans toucher à une seule ligne de CSS ou de JavaScript.

Le processus se déroule ainsi :

1. Personnalisez votre widget. Utilisez le lien ci-dessus pour ouvrir le générateur de widgets de Jotform et commencer à ajuster les paramètres. Vous pouvez modifier les styles d’icônes, définir la taille et le rayon des coins de votre bouton, et même choisir des couleurs assorties à votre marque. Le widget facilite le déplacement du bouton sur l’écran, l’ajustement de l’espacement aux bords et l’activation ou la désactivation de la visibilité pour les utilisateurs sur ordinateur et sur mobile.

2. Obtenez le code d’intégration. Une fois que le bouton a l’apparence souhaitée, Jotform génère un code d’intégration prêt à l’emploi. Aucune installation de plugin, aucune étape de configuration, aucune complication.

3. Collez-le dans Squarespace. C’est là qu’intervient l’interface actuelle de Squarespace. Vous avez deux options principales :

• Sur l’ensemble du site (recommandé pour les boutons retour en haut de page) : Dans votre tableau de bord Squarespace, allez dans Pages dans le menu de gauche, faites défiler vers le bas pour trouver la section Custom Code (Code personnalisé), puis cliquez sur Code Injection (Injection de code). Collez le code d’intégration dans le champ Footer (Pied de page), puis cliquez sur Save (Enregistrer). Le bouton apparaîtra automatiquement sur chaque page. (Remarque : l’injection de code sur l’ensemble du site est disponible avec les forfaits Business et supérieurs.)

• Sur une seule page uniquement : Modifiez la page sur laquelle vous souhaitez placer le bouton, cliquez sur le + pour ajouter un bloc, puis choisissez Code. Collez-y le code d’intégration et enregistrez. Le bouton n’apparaîtra que sur cette page, mais vous pouvez répéter l’opération sur chaque page qui en a besoin.

C’est tout. Actualisez votre site, et le bouton apparaît, prêt à ramener les visiteurs en haut de la page. Si vous avez déjà suivi les étapes pour ajouter un formulaire à Squarespace, le processus d’intégration ici vous semblera identique.

Quelques raisons pratiques pour lesquelles cette méthode tend à être la voie de moindre résistance :

• Il se met à jour automatiquement. Si vous décidez de changer la couleur ou la position le mois prochain, il vous suffit de modifier les paramètres de votre widget dans Jotform. Le widget en ligne reflète alors le changement. Aucun besoin de recoller le code.
• Il fonctionne aux côtés d’autres widgets de site web gratuits que vous pourriez souhaiter, comme les barres d’annonces, les flux sociaux ou les boutons de contact. Ils utilisent tous la même approche d’intégration.
• Il s’intègre bien au reste de votre configuration Squarespace. Si vous collectez aussi des prospects via des formulaires, l’intégration Jotform + Squarespace facilite l’ajout de nouveaux formulaires, de paiements et de capture de prospects en utilisant le même modèle d’intégration.

Pour la plupart des utilisateurs de Squarespace, c’est là que le projet s’arrête. Mais si vous souhaitez un contrôle total au pixel près, continuez votre lecture.

Méthode alternative : ajouter un bouton retour en haut de page dans Squarespace avec du code personnalisé

Si vous êtes à l’aise avec le HTML, le CSS et un peu de JavaScript, vous pouvez créer un bouton retour en haut de page flottant entièrement à partir de zéro. Squarespace prend officiellement en charge le code personnalisé via le panneau Code Injection, le panneau Custom CSS et les blocs de code individuels.

Notez simplement le temps que cela demande. Vous aurez plus de flexibilité sur le bouton lui-même, mais vous devrez aussi tester et dépanner davantage. Par conséquent, cette option ne convient généralement qu’aux développeurs qui ont besoin d’un rendu très spécifique. Vous pourriez également l’utiliser si vous souhaitez un contrôle précis sur l’animation, les seuils de défilement ou le comportement aux points de rupture.

Voici comment procéder.

1. Choisissez l’emplacement du code. Pour un bouton qui doit apparaître sur l’ensemble du site, utilisez Website → Pages → Code Injection → Footer. Le code ajouté ici est injecté juste avant la balise de fermeture </body> sur chaque page. Pour un bouton ponctuel sur une page spécifique, survolez la page dans le panneau Pages, cliquez sur l’icône d’engrenage, choisissez Advanced, et utilisez plutôt Page Header Code Injection.
2. Ajoutez le HTML. Insérez un élément bouton avec un ID afin de pouvoir le cibler plus tard. Cela ressemble souvent à ceci : <button id=”backToTop” aria-label=”Back to top”>↑ Top</button>. Veillez à conserver l’aria-label pour faciliter l’accessibilité aux lecteurs d’écran.
3. Mettez-le en forme avec du CSS. Vous modifiez maintenant l’apparence et le comportement du bouton avec du CSS. Commencez par ouvrir le panneau Custom CSS (sous Website → Website Tools → Custom CSS). Positionnez le bouton en fixe en bas à droite. Puis masquez-le par défaut en définissant opacity: 0 et pointer-events: none. Vous voudrez également une transition qui apparaît en fondu en douceur lorsqu’une classe comme .visible est ajoutée. Enfin, définissez une valeur z-index suffisamment élevée pour qu’il se place au-dessus de votre contenu mais en dessous de toute fenêtre modale.
4. Ajoutez la logique JavaScript. Vous avez aussi besoin d’un petit script qui surveille la position de défilement. Ainsi, le bouton n’apparaît que lorsqu’il est pertinent pour l’utilisateur. Par exemple, une fois que le visiteur dépasse un seuil choisi (par exemple, 300 pixels), le script ajoute automatiquement la classe .visible, et le bouton apparaît. Si l’utilisateur clique sur le bouton, celui-ci appelle window.scrollTo({ top: 0, behavior: ‘smooth’ }), qui ramène la page en haut avec une animation fluide.

Le principal avantage de cette approche est la liberté de conception, mais ce n’est pas quelque chose dont la plupart des entreprises ont besoin. Les widgets et outils comme Applis Jotform pour créer des applications sans code offrent suffisamment de flexibilité pour personnaliser votre bouton et peuvent vous faire gagner beaucoup de temps de codage. De plus, vous n’aurez pas à mettre à jour votre code chaque fois que Squarespace publie une nouvelle modification structurelle de ses modèles.

Solution simple de contournement : utiliser un lien d’ancrage comme raccourci retour en haut de page

Si vous n’avez pas réellement besoin d’un bouton flottant — juste d’un lien Retour en haut de page cliquable au bas de longues sections — la fonctionnalité de lien d’ancrage intégrée à Squarespace fait le travail sans aucun code. Squarespace a ajouté cette fonctionnalité en 2025 dans le cadre de Squarespace 7.1. Voici comment cela fonctionne :

1. Définissez l’ancre sur votre section supérieure. Cliquez sur Edit sur la page où vous souhaitez le raccourci retour en haut de page. Survolez avec votre souris la toute première section et cliquez sur Edit Section. De là, faites défiler jusqu’au champ Anchor Link, qui se trouve en bas du panneau des paramètres de la section. Saisissez un slug comme « top » et cliquez sur l’icône de copie pour obtenir votre URL.

2. Ajoutez un lien retour en haut de page où vous le souhaitez. Ajoutez un bloc bouton ou un bloc texte plus bas sur la page. Mettez en surbrillance le texte ou le bouton, cliquez sur l’icône de lien, et collez l’URL d’ancrage. Lorsqu’un visiteur clique dessus, la page remonte vers cette section supérieure.

3. Facultatif : rendez le défilement plus fluide. Les liens d’ancrage envoient l’utilisateur en haut de la page instantanément, ce qui peut être brusque et perturber son immersion dans votre site. Corrigez cela en ajoutant une légère animation de défilement. Allez dans Website → Pages → Custom CSS et ajoutez :

html {

  scroll-behavior: smooth;

}

Cette seule ligne applique un défilement fluide à chaque lien d’ancrage sur l’ensemble de votre site.

Cette méthode présente quelques limites évidentes. Elle n’est pas flottante, donc les visiteurs ne voient le lien qu’à certains endroits de la page (généralement à la fin de longues sections ou près du pied de page). Elle n’apparaîtra pas non plus automatiquement sur chaque page, comme le ferait un widget ou un bouton avec code personnalisé sur l’ensemble du site. Pour les longs articles de blog, les pages de vente ou les sites d’une seule page qui ont simplement besoin d’un retour rapide vers le haut, un lien d’ancrage suffit souvent.

Remarque : Les liens d’ancrage ne sont pas directement pris en charge sur les sections blog, événements, portfolio ou boutique. Pour les utiliser sur ces pages, vous devez ajouter une section vide au-dessus de celle qui n’est pas prise en charge et y ancrer le lien à la place. Vous pouvez rendre cela correct en désactivant l’option Fill Screen dans les paramètres de la section vide. Sinon, vous aurez un espace disgracieux en haut de la page.

Ajouter un bouton retour en haut de page sans trop compliquer Squarespace

Si vous recherchez le moyen le plus simple d’ajouter ces boutons sans compliquer votre Squarespace, un widget sans code est l’option la plus rapide et la plus flexible. Par exemple, avec le widget Retour en haut de page de Jotform, vous pouvez concevoir, intégrer et mettre à jour sans jamais écrire une ligne de code.

Le code personnalisé vous offre un contrôle total sur la conception, ce qui est utile si vous avez des objectifs visuels très spécifiques. La fonctionnalité native de lien d’ancrage est une solution de contournement correcte, mais elle ne vous donne pas autant de contrôle. Quel que soit votre choix, adaptez la méthode aux besoins de votre site et n’en faites pas trop.

Essayez le widget Retour en haut de page dès aujourd’hui pour ajouter un bouton de retour vers le haut soigné à votre site Squarespace en quelques minutes. Et si vous utilisez déjà Jotform pour vos formulaires Squarespace, le processus d’intégration vous semblera familier dès le premier clic.