Navigate to page and scroll down

Hi Bubblers,

Is it possible to set up a workflow so that when an element is clicked, the user is redirected to another page in the app and the page scrolls down to a preset Y value?

Thanks,
Andy

4 Likes

I think you can do that if you add something in the URL. Then when the page loads and the URL has a certain parameter then it scrolls to a certain element.

Here is an example of how you can do it:

And here it is in action:

Hope this helps! :smile:

9 Likes

@J805 +1 for your approach

Your setup of setting the scroll to is to a specific element, not an offset from the page itself, is good to do for maintaining consistency as the page size and layout changes.

1 Like

Thanks, yes, that is why I do that, I work a lot with mobile responsiveness design and it really doesn’t work if it is just a certain amount of pxls from the top of the page, you would be all over the place depending on what size screen you are looking at. :slight_smile:

2 Likes

Nice example, BTW, of how one would do this. It is interesting to note though (I don’t use “Scroll to” action much so had never noticed this) that none of the parameters for “Scroll to” are dynamic:

That is, we can’t pass a value for “Element” nor for “Offset” directly to the “Scroll to” action. So, if the OP needed flexibility like that, you’d need to have several Scroll to actions controlled by “Only when” conditions. Like:

1 Like

Hey Keith, Dan and J805,

Thanks very much for your help, from your advice I figured it out and am now onto my next dev task.

I’ll be pleased to reciprocate when I am proficient enough to offer advice to others.

Thanks again,
Andy

3 Likes

Welcome!

Just an FYI with the forum. I didn’t actually get this message. It is best to add the mention of the person with an @ symbol like this @keith @dan1 which sends them a notification. Also, when the problem is solved you can mark it “Solved” by click the checkbox :ballot_box_with_check: of the reply that resolved your issue. Only the person posting the question can see that option to mark it “Solved”. Anyways, glad we were able to guide you in the right direction! Enjoy Bubble like the rest of us!

1 Like

Thanks for the additional advice J805.
Andy

1 Like

Could anyone explain how to do it with several different section of the page? When i did it how its shown above, everytime the index loads it scrolls down to the section.

@J805 Hi! Could you kindly describe step by step how you achieve this behaviour on your page? I can’t understand how you’ve done this.

Hey @ser-ser1_astro :wave:

Let me see what I can do…

Step 1: On a button or element, make a workflow and choose the page you want to go to, it could be the same page if you prefer. Add the parameter, something like the example, I choose Scroll. Add a value, for mine, I chose Yes.

Step 2: Go to the page you are sending it to. Create a new workflow for ‘Page is Loaded’ and for the first step you choose ‘Scroll to’ and choose the group/element that you want to scroll to. Put a condition on the step that says ‘Get data from URL’ and then type the parameter name that you sent from the other page. Mine was called Scroll. Then choose ‘is’ and then put in the value you sent along from the other page as well. In my case it was just Yes

That’s all you need to do.

When you look at the URL in your browser, you will see what it will look like too. Mine ends up looking like this: https://scrolltoelementonanotherpage.bubbleapps.io/version-test/newpage?debug_mode=true&**Scroll=Yes**

The Scroll=Yes is my parameter I sent to the page and I am using another workflow on the page to ‘read’ it and use it in the workflow.

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

3 Likes

Hey @aaronambro23 :wave:

Make sure you have a condition on each of the workflows that checks which group you want it to go to. For example, if you want to scroll to Group1 on the page, send Group1 as the value to the new page. If you want it to scroll to Group2 on the page, send Group2 as the value to the new page.

Hope that makes sense. :blush:

Thanks man, it was really helpfull!

1 Like

Hey @J805 !
It’s a great solution, thanks for sharing all the screenshots and the good explanation! :slight_smile:

1 Like

@ser-ser1_astro @design.agx

Glad it helped! :blush:

This worked perfectly for me when I needed to link my navigation bar as a Reusable Element.

For posterity, there was a problem I faced: When the user successfully scrolled to the section, I scrolled up to the navigation bar and tried clicking on the button again but nothing happens.

This is because the URL already has the passed parameters, in this case (http://XXXX.com/?Scroll=Yes) in accordance with your example.

To resolve this, it’s very simple. Essentially, we need to reset the parameters URL in browser without needing to refresh the page.

Found the solution here: How to restart current page parameters? (Keys) - #4 by cmarchan. Within the “When Page is Loaded” workflow, place at the very end an action ‘Go to page’ > Select Destination as Index (or whatever page your current workflow is in).