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
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
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!
@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.
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.
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:
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
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 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!
Thanks for the additional advice J805.
Andy
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
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!
For All Your No-Code Education Needs:
Hey @aaronambro23
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.
Thanks man, it was really helpfull!
Hey @J805 !
Itâs a great solution, thanks for sharing all the screenshots and the good explanation!
Glad it helped!
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).