A quick tutorial how to scroll from (almost) any block to a specific area on the same page. It also can be used to link to another page which scrolls then to the desired area smoothly.
1.) Enable Target Area and copy its ID
You can target any area you want. In most cases it makes sense to target a Section or Div Block.
Copy the ID from the block you want to scroll to.
Toggle the ID manually, in case you enabled the “Remove Classes & IDs” in the Cwicly options
2.) Setup your Trigger / Insert the ID as Anchor Link
Any block that allows the Link Option can be used as a trigger In most cases these are menu links or buttons, like CTA’s (call to action).
Click the Link option on your Trigger Block
Insert the Block ID from your Target Block (Step 1). Do not forget to prepend a hash sign (#)
Sometimes it makes sense to apply a scroll offset. One use case is a fixed header, which would overlap the target section in its final scroll position, which I want to avoid.
In my example I have a header with a height of 100px, so I want to apply a top offset of the same height.
Make sure to apply these settings on your Target Block, not your Trigger Block.
Since this topic came up a couple of times and especially with the recently added scroll-margin property and the removal of classes and ID’s, which is now another potential hurdle, I thought it could be helpful.
Hi Marius, thanks for your tip! Is it possible to use anchor links also for repeater blocks inside a tamplate? I think a solution would be using a dynmic ACF repeater field to set the block id of the individual repeated elements. Is that possible? In my case I want to set the id of repeated heading by ACF repeater field data, so that I’m able to set anchor links to the indiviual headings:
Do you have an idea of a workaround for that?
Thank you!
Greetings
Marc
Regarding your question, unfortunately I’m not aware of any technique which wouldn’t require additional JS.
I found a similar use case and I’ve seen people asking about dynamic ID’s here and there.
Add your vote and/or some thoughts to the feature request if you want.
Btw. I just revisited the demo and found out that the scroll-margin-top was now a margin-top instead. Not sure how or when that happened. Re-saving the page helped. HTML regeneration was done directly after the last update.
Maybe something to take note of @Louis.
Just a quick follow up here, since I was in rush earlier and I totally missed your main point, I’m really sorry for that.
What you described as a potential workaround is totally possible and works indeed.
You can set your repeater item ID’s dynamically via ACF + dynamic attributes.
Your anchor links need to be setup statically since you need to prepend a hash sign (#), which is currently not possible via the interface (but will be soon).
Hello @Louis
i cannot add a working link to my buttons … i have tried to use a static external link and an internal anchor link but in both cases the rendering as issue this the dom screenshot and the admin ui.
I there a way to link to a post via an anchor tag from another page? Let’s say I want to have an individual link from the excerpt of a post on my homepage to its respective counterpart on the archive page. In this specific example, there is no single post page but the content is displayed directly via a list of posts on the archive.
Everything looks fine DOM wise, no console errors. Tested on an actual Android device.
Did you check things with your form plugin disabled?
There might be an interference (just guessing).
I recommend creating a bug report, that’s not the right place where you can receive help.
Have a great day !