Scroll from link in reusable header element and then use browser back button to scroll back up

Need help
1

I’m trying to scroll to a group on a page from the reusable header element (without the page refreshing). I’d then like to be able to hit the browser back button to scroll back to the header (without the page refreshing).

I mocked out a quick editor sample here: https://bubble.io/page?type=page&name=scroll&id=testhis&tab=tabs-1

I’ve read some forum posts on using parameters and such, but I wasn’t able to reproduce them. Any help on this would be most appreciated. Thanks.

1 Like
2

@eddie,

I updated so that your links in the reusable trigger a scroll with URL parameters. (Orange events and link elements)

I also gave you an alternative with a 3rd button that uses a custom state. Whenever the reusable element has a custom state value, the page will scroll. (Purple event)

You have some pros/cons to either method regarding the back button:

  • The custom state option technically keeps you on the same page, so clicking back may take you out of the app. But, this option also keeps things out of the URL.

  • The links take you to a new URL with parameters every time you click, but say a user clicks on 1st link and then the 2nd… the back button will take the user from link 2’s url to link 1’s… not to a parameter-less url.

If you want the page to behave as instructed by a url regardless of how you got to the page (back, forward, refresh, direct), then links are better.

I also added a scroll to the page element (i.e. to the top of the page) whenever the page is loaded and there is no URL parameter AND when there is no custom state value. This is so that if you do click back to a parameter-less url or refresh the url with no parameters, you’re always taken back to the top. (Blue event) - please note that I put both conditions in here because I added both methods to your page. In reality, whichever method you go with would only need the condition for that method (either url parameter is empty or custom state is empty)

I hope this helps!

Gaby at Coaching No Code Apps (formerly Coaching Bubble)

Courses & Products, Tutorials, Private Coaching, and High-level Development

Start Learning Today :mortar_board:

2 Likes
3

Worked great, @romanmg. Thanks!

1 Like
4

This topic was automatically closed after 70 days. New replies are no longer allowed.