Scrolling to top within a group
Scrolling to top within a group
Bubble’s newish ‘Allow vertical scrolling when content overflows’-feature is great. Especially when building for mobile. It allows us to build pages with scrollable content while still keeping the size of the parent group set to a fixed value.
However, currently, Bubble lacks a workflow to scroll back up, which can lead to a sub-par UX. Imagine we build a settings view in a single-page app. We would want to scroll back up every time the user leaves the settings page so that they can start scrolling from the top the next time they open the settings.
Luckily, this can be done with a single line of JavaScript (or a plugin - more on this later). Here is how:
In Settings / General check ‘Expose the option to add an ID attribute to HTML elements’.
Install the Toolbox plugin
Add an ID attribute to the group you want to scroll to the top
To scroll the group up, run the following JavaScript code (using the ‘Run javascript’ workflow provided by the Toolbox plugin).
document.getElementById('YourIdAttribute').scrollTop = 0;
Done.
Don’t like code? You can also just use my free Bubble plugin.
Some interesting stuff I came across
That’s it.
Keep it simple!
Damian