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:

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

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

Your Favorite Freelancer @creativ_eny

I made a cute like button + animation on @bubble. . . #nocode

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

That’s it.

Keep it simple!

Damian

👉 twitter.com/DamianJanzi

👉 bubblehacks.io