Giving your users the ability to instantly go back to the top of your page is a good practice when it comes to User Experience.
In this article, we are going to show how to create a button that scroll to the top of a page in Bubble.io.
We've also show you how to add some conditional appearance, to make sure it displays only when needed !
And this, without any plugins and without any coding.
To go further, you can also read our article on how to customize your scrollbar in Bubble.io.
Step 1 : Design your Scroll to Top button in Bubble.io
First and foremost, we need to design the actual button of which users are going to click to scroll to the page of the page.
And of course, we want to make sure that this button sticks to the bottom of the page (at the right of the screen preferably).
We've already covered this type of sticky components in previous articles, so you may know how to do this.
In short, we are going to use a Floating Group ! This will give us the ability to have the button always visible and placed at the bottom of the screen.
So let's go ahead and add one to our page with the following settings :
As you can see in the screenshot above, we've set the group so that it vertically floats relative to the Bottom of the Screen, and horizontally to the Right of the screen.
Now, the issue with our Floating Group is that it is too close to the border of the screen, so let's add some margin to it, and let's style it a little.
As you can see, I've set the Right and Bottom margins to 24 px, I gave the Floating Group an Align To Parent layout and I also gave it a Fixed Width and Height.
Obviously, feel free to style it according to your needs !
Now, just to give it some more clarity, I added an Icon at the center of my Group.
Step 2 : Adding Scroll to Top Workflow in Bubble.io
Now that we have our button, we make to make it work !
So let's do this by selecting our Floating Group and add a new Workflow to it ! (make sure to select the Floating Group, not the icon).
To make this workflow scroll to the top of the page, you'll need to add a "Scroll to an Element" action to your workflow and select your page as the element.
And keep the offset to 0 pixel.
And there you go ! Hit preview, and you will see that your scroll to top button should now work perfectly.
However, it is currently always visible, even when you're already at the top of the page, so let's correct that !
Step 3 : Adding conditional appearance to our Scroll to Top Button
Obviously, we do not want our Scroll to Top button to be visible when your user are already at the top of your page, this is misleading for your users !
To fix this, you'll first need to change the default visibility of your button, to make sure it is hidden by default.
To do that, simply uncheck the "This element is visible on page load" option on your Floating Group.
This will make your Floating Group invisible by default !
Now, to make it appear when your user as not at the top of your page, simply add the following conditional to your Floating Group :
In this example, I've set the Scrolling Position to 350 Pixels, but feel free to modify this value according to your use case !
Conclusion
And there you go ! You now have an amazing Scroll to Top button for your Bubble.io app that works perfectly and displays when needed.
This is a great way to enhance your User Experience, which is always a good thing !
