Scroll to root page element from Reusable Element

Hi there,

I was fiddling around with one of the free templates. This is a one pager that using the workflow scrolls to a specific section when clicking on a menu item. It uses a small JavaScript to do this.

Wanting to have it codeless I tried to change that to the native Bubble element action “scroll to element”. This is working for elements that are on the same level as the section it is scrolling to.

But the navigation menu is part of a reusable element. I noticed that in that case it not possible to select the element to scroll to, because it is not part of the reusable element. I only can select elements that are part of the reusable element.

So in this case, am I bound to either use the JavaScript or to abandon the reusable element by putting the navigation bar in a regular (floating) group element on the page? Or does anyone know a codeless (bubble native) workaround for this?

Tnx

It is really difficult to get multiple reusable elements on the same page to communicate with each other.

You may be able to set something up with custom states and conditional workflows.

Off top of my head, I think you could in the reusable element that the menu is in, put a custom state that represents the menu item selected. Then on the page with the multiple reusable elements have a conditional workflow event for “when menu reusable element custom state is not empty” and have it scroll to an element that you somehow relate to the custom state value.

If you share some screen shots or Gif it would be easier to help.

I use this website to turn .mov files into gif

Using a custom state “scrollto” on reusable element works like a charm.

On menu item click I set scrollto = [section name].

Then on the root page worklow I have a Do only when (everytime) scrollto = [section name] scroll to element [section group] directly after this I empty my scrollto custom state.

Thanks!

3 Likes

You can also use global variable from BDK they’re great when using a one page app with lots of data to be passed between re usable elements. You can make anything visible over the whole app. I have no idea why they aren’t standard feature.

I use this and also the method above with do when conditions, the do when is cheaper as it’s free

I use the BDK Env Variable plugin a lot as well. Mostly I have been using it to create forms. I have each section of the form as an individual reusable element, then I place them all on a page. I started to do this as when building everything onto on page, it gets slow and the process eventually comes to a near stand still.

I think in the near future this would become a standard feature, but for the now, the $16 Env Variable plugin price is pretty cheap and well worth it.

1 Like

Thanks, for now I am good to go with the custom state and do when condition. But I will check the Env Variables plugin. Sounds interesting

I’m trying with the custom states but doesn’t work for me.
Header popup has text [features] and workflow click to set custom state [features] with yes/no,
Root page workflow "when popup’s features is yes, scroll to Group Features.
This doesn’t work, any ideas?
(I have used a text box to validate that the click works.)