bubbleHacks

Share this post
Scrolling to top within a group
bubblehacks.substack.com

Scrolling to top within a group

Damian
Oct 18, 2022
Share this post
Scrolling to top within a group
bubblehacks.substack.com

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.

Thanks for reading bubbleHacks! Subscribe for free to receive new posts and support my work.

Luckily, this can be done with a single line of JavaScript (or a plugin - more on this later). Here is how:

  1. In Settings / General check ‘Expose the option to add an ID attribute to HTML elements’.

  2. Install the Toolbox plugin

  3. Add an ID attribute to the group you want to scroll to the top

  4. 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

Twitter avatar for @thmawa
Thimo @thmawa
As maybe most of you have experienced, using custom fonts in @bubble applications is a cumbersome process. That's why I have created this nifty tool to generate the CSS file path from a font file for you to use in Bubble (free for everyone 🙂)! ➡️ bit.ly/3SUIuMW
Image
3:31 PM ∙ Oct 12, 2022
61Likes12Retweets
Twitter avatar for @creativ_eny
Your Favorite Freelancer @creativ_eny
I made a cute like button + animation on @bubble. . . #nocode
3:40 PM ∙ Oct 3, 2022
73Likes5Retweets
Twitter avatar for @NeilRyanPierce
Neil Pierce 🇺🇦 @NeilRyanPierce
Traditional devs lay their app structure out to be “modular”. Typically using the MVC Framework ( Model, View Controller), leveraging components (Modular Code). You as an @bubble developer should be thinking along the same lines. Having organized. Clean structure is vital. 👇
11:45 AM ∙ Oct 13, 2022
37Likes4Retweets

That’s it.

Keep it simple!

Damian

👉 twitter.com/DamianJanzi

👉 bubblehacks.io

Thanks for reading bubbleHacks! Subscribe for free to receive new posts and support my work.

Share this post
Scrolling to top within a group
bubblehacks.substack.com
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Damian Janzi
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing