I set up anchor links for a project recently and noticed some people had questions on the forum about how to approach this. Although there are probably lots of other ways to do this, more standard ways with HTML, and maybe plugins…here’s how I did it using just simple Bubble functions. Hope it helps out some people who may be newer to Bubble. Best of luck with your projects!
-Adam
1. Set up you page
I’ve made an example page with sections that can be referenced. In my example, I made groups for each of my sections and labeled them. You could also use your titles or any other page elements for this…
2. Decide on a convention for your URL parameter and section names.
You could use “scroll” or “goto” or “view” or anything else. I’ll use “scroll” for my example.
3. Decide on your section names.
It is nice to use something user-friendly but short. If you are using anchor links somewhere it is nice for the user to see why you’ve provided an anchor link relative to their context.
For example, let’s say somewhere you want to show people your page, and highlight that they can get involved in what you are doing. I’ve got a section on my page (#4) called “Get Involved”. So, if you want to give them a link with
?scroll=getinvolvedadded at the end. Users will see based on their context why you are giving them that link specifically. Full URLs will look something like this:example.com/yourpage?scroll=getinvolved
4. Set up a workflow on page load or after the page is fully loaded.
– The workflow trigger can be attached to when the page is loaded or after any other page load workflows.
–Use the action scroll to an element
– The element = where you want to scroll to.
– Have the action happen only when and use get data from page URL.
– The parameter name is whatever you have chosen in step 2.
– Add is and your section name.
Note: If you have a repeating group that has more results than its container’s height it will push elements below it down on the page. In Bubble, these will often load after the page is loaded which means you might scroll somewhere on the page before a repeating group pushes things that were there lower. If you can predict how many results will be in a repeating group you can set your page up to receive them. If you can’t predict how many results are in the repeating group you could add a pause before scrolling.
5. Refine using offsets.
When I used ?scroll=getinvolved I got a result that doesn’t look very nice because I have a floating group as a header.
To make this look better use the offsets in your scroll to element workflow actions.
Because my header is 80px tall, I want to have my section appear 80px lower. To do this I’m going to tell Bubble I want it the page to scroll to 80px above the section, or -80.
If you wanted the section to appear higher then use positive numbers as offsets.
After adding this to each of my actions here is the result:
There’s lots of ways this can be refined and updated to fit your site or app. Hope it helps!
