I have been trying for hours to make something that mimics the standard iOS list element.
Show list -> click list item -> show new group, scroll in new group -> go back to original list with scroll position same as it was.
Anyone been able to do this?
@fayewatson, @NigelG - You both seem to have a good grasp on the platform, is it possible to recreate this standard functionality?
Great question! I believe this is easier for repeating groups, but when you donât have a repeating group, it can be a bit tricky. There may be a better way, but one possible workaround is to use a combination of parameters, and the Toolbox plugin in order to run custom JavaScript. Here is an example:
Preview:
Editor:
Here there is a Settings Group, located on the page and a Notifications Group, located in its own Floating Group. When one of the blue groups on the Settings Group is clicked, the Notifications Floating Group becomes visible and the page is scrolled to the top. Since the scroll takes us to the top when the Notifications page becomes visible, we also want to temporarily store the previous scrolling position where we left off on the Settings page.
The first step is to setup the Go to Page workflow for when one of the Settings page blue squares are clicked. Here we can use the âGo to Pageâ action, and send an additional parameter in order to send the scrolling position through the URL. This parameter (âpositionâ) stores the scrolling position:.
When this parameter is sent, or added to the URL, we want the Notifications floating Group to become visible. To do this, we can set the floating group to not be visible on page load, and add the conditional statement to make it visible when the position parameter is not empty:
The reason Iâm sending the parameter is so that when a blue group on the Settings page is clicked, the Userâs scrolling position will be âsavedâ in the page URL, and youâll see it by it being added to the end of the page URL in the form of ?position=942 (with 942 being the scroll position we left off on on page 1, as an example). The other benefit of using parameters for this, is so that the User can click the back button on their phone, or in their browser, and theyâll and be taken from the Notifications Page to the Settings Page (not the page they were on before the Settings page).
Then we just need to setup two different workflows with JavaScript in order for the page to scroll to the top of the Notifications Page each time that becomes visible, and another workflow which goes to the scrolling position where the User left off on the Settings pages when back is clicked.
In the Notifications workflow, the condition is that when the position parameter is not empty --> scroll to 0,0 (X,Y coordinates). That brings us to the top.
Then we can use a similar workflow which uses the position parameterâs scroll position value as dynamic data for the Y when the Page is reloaded (the User has hit the back button).
The âWhenâ parts to these workflows are almost the same, but the main difference is the âPage is loadedâ part. When any blue Group is clicked on the Settings page, the âGo to Pageâ action takes us to the same page, but doesnât actually reload the page - it only sends the position parameter.
When we are on the Notifications Page, and click the Back button in the browser or on our phone, the page is reloaded. Itâs a bit confusing since it looks like the position parameter disappears from the URL when we hit âbackâ but it still can be used in the workflow:
Hopefully someone has a more clever way, but that may be a potential workaround for now! 
If any of this was confusing or if I can help in any way feel free to let me know!
This helped do the trick! Since I am optimizing for mobile, I am not using pages, but was able to do this with javascript.
I saved the page scroll as a state then pulled that state back in when I close the second group.
Thanks so much!
Hi @fayewatson,
I am trying to build a similar functionality in my app but the difference being that I have built all the stuff on one page (Being a native app). When trying to duplicate this workflow it gives an error that Go to page action should not be used in native apps. Is there a workaround?
Hi @Ankur Ah, I havenât created an app for the app store with Bubble, so Iâm not sure about that error or if thereâs a different way to make sure the User can go click âbackâ on their phone without leaving the page. Alternatively, you can do what Ben did in the post above yours which goes to the scroll position once a User closes (or hides) a specific group. That probably is the best bet!
Hi Ankur,
You can set a page state called âscroll positionâ (or whatever) with the current page scrolling position as its value. Then when you want to go back to the page and scroll to the previous position, you pull the target scrolling position from the âscroll positionâ page state.
@fayewatson great walkthrough. How would this work if the user moves to another page? I take it the parameter wonât work as itâs removed when they hit back? I need to save the scroll position of the repeating group so that when they come back to the page with the repeating group, they will go back to the same position? Iâve also got pagination on the repeating group (donât know if that would make a difference?) 
@josh7 Right, I think the pagination would make a difference. For example, if you use ext. vertical scrolling, go to another page, and then go back, the Current User should automatically be taken to the item in the repeating group where they left off. Can you share a link to your app editor to see how the pagination is setup?
This works perfectly for me. Thanks a lot!
Hi,
Thanks for the thread information @ben7, @fayewatson, @Ankur, @ava and @josh7!
Could you have a look here, as for me saved position works well (when user goes back), but when user clicks to move forward (and save the position in the state), it wonât scroll to the top, as the second workflow refers. What could be the case here? Thanks in advance!
Hi,
What is working for me is: I have a back button at the top left of my single page app.
When the back button is clicked, it sets a custom state to the index page (state âback buttonâ = yes)
Then I have a workflow âon page loadâ of the index page: âscroll to topâ only when the custom state is âback buttonâ = no.
And for any navigation workflow of my app, at the beginning of workflow I add an action to set the index page state âback buttonâ back to = ânoâ
In this way, at every navigation, the index page scrolls to the top, except when the user navigates back using the back button (the one I added to the app, not the one of the browser).
