Workaround to limitation of Scroll To Element from repeatable group menu item to mimic basic landing page functionality

Need help App Organization
1

Continuing the discussion from [SOLVED] Workflow: Scroll to element:

Hi all, great stuff here, much appreciation to all contributors. I’ve been learning quite a bit, but still drinking from a fire hose at times. I’ve read multiple topics related to this limitation, where you can’t execute a Scroll To Element action from within a reusable group (in my case a top floating Nav bar whose menu items change based on whether a user is logged in or not).

The objective is to give visiting users a basic landing page experience from index page so they can learn about my app before deciding to signup, or if already signed up, logging in. The nav bar is a repeatable group that changes menu options based on whether and what type of user is logged in. I have Groups named on index, but can’t access them as Element options to Scroll To because I am attempting to execute the action from within the nav bar repeatable group.

Being a total “code poser”:sunglasses:, I’m trying to execute this with native bubble functionality. It seems like a very common use case considering most SaaS app landing pages allow you to scroll to various sections of the landing page from a floating top menu (Solutions, Pricing, About Us, etc…). Any ideas? #appreciation

2

You have to create an intermediate state on the reusable element.

How:

Create a custom state (text) on the header element itself. Set the state to a custom value (i.e. “about”) when an item is clicked. On the index page use “do when condition is true” to listen to the various states you set to scroll to the appropriate location.

3

Thanks for the guidance! It took multiple mistakes, but I was able to figure out how to execute the “how”. In case it helps others, I realized that I needed to type a custom value state by typing the word (i.e. “solutions”) vs looking for drop down menu options.

Appreciate your help!

1 Like