Permettre à vos utilisateurs de revenir instantanément en haut de votre page est une bonne pratique en matière d'Expérience Utilisateur.

Dans cet article, nous allons vous montrer comment créer un bouton qui fait défiler vers le haut d'une page dans Bubble.io.

Nous vous expliquons également comment ajouter un affichage conditionnel, pour qu'il ne s'affiche que lorsque c'est nécessaire !

Et tout cela, sans aucun plugin ni codage.

Étape 1 : Concevez votre bouton Retour en haut dans Bubble.io

Tout d'abord, nous devons concevoir le bouton sur lequel les utilisateurs vont cliquer pour remonter en haut de la page.

Et bien sûr, nous voulons que ce bouton reste fixé en bas de la page (de préférence à droite de l'écran).

Nous avons déjà abordé ce type de composants fixes dans des articles précédents, vous savez donc peut-être déjà comment faire.

En résumé, nous allons utiliser un Floating Group ! Cela nous permettra d'avoir le bouton toujours visible et placé en bas de l'écran.

Passons à l'ajout d'un Floating Group sur notre page avec les paramètres suivants :

Comme montré sur la capture d'écran ci-dessus, nous avons configuré le groupe pour qu'il flotte verticalement par rapport au bas de l'écran et horizontalement à droite de l'écran.

Le problème avec notre Floating Group est qu'il est trop proche du bord de l'écran, ajoutons donc une marge et un peu de style.

Comme vous pouvez le voir, j'ai réglé les marges Droite et Bas à 24 px, j'ai donné au Floating Group une disposition Align To Parent et fixé sa largeur et sa hauteur.

Évidemment, n'hésitez pas à le personnaliser selon vos besoins !

Pour plus de clarté, j'ai ajouté une icône au centre de mon groupe.

Étape 2 : Ajout du Workflow de défilement vers le haut dans Bubble.io

Maintenant que nous avons notre bouton, il faut le faire fonctionner !

Sélectionnez donc votre Floating Group et ajoutez un nouveau Workflow ! (assurez-vous de sélectionner le Floating Group, pas l'icône).

Pour que ce workflow fasse défiler vers le haut de la page, ajoutez une action "Scroll to an Element" dans votre workflow et sélectionnez votre page comme élément cible.

Laissez l'offset à 0 pixel.

Et voilà ! Lancez un aperçu, votre bouton de retour en haut devrait maintenant fonctionner parfaitement.

Cependant, il est actuellement toujours visible, même quand vous êtes déjà en haut de la page, corrigeons cela !

Étape 3 : Ajout d'un affichage conditionnel à notre bouton Retour en haut

Évidemment, nous ne voulons pas que notre bouton Retour en haut soit visible lorsque votre utilisateur est déjà en haut de la page, cela pourrait prêter à confusion !

Pour corriger cela, commencez par modifier la visibilité par défaut du bouton pour qu'il soit caché par défaut.

Pour ce faire, décochez simplement l'option "This element is visible on page load" sur votre Floating Group.

Votre Floating Group sera alors invisible par défaut !

Pour qu'il apparaisse lorsque l'utilisateur n'est pas en haut de la page, ajoutez simplement la condition suivante à votre Floating Group :

Dans cet exemple, j'ai défini la position de défilement à 350 pixels, n'hésitez pas à adapter cette valeur à votre cas d'usage !

Conclusion

Et voilà ! Vous avez désormais un excellent bouton de retour en haut pour votre application Bubble.io, qui fonctionne parfaitement et s'affiche uniquement quand c'est nécessaire.

C'est un excellent moyen d'améliorer l'Expérience Utilisateur, ce qui est toujours positif !