Scroll to Specific Area (smoothly)

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.

  1. Copy the ID from the block you want to scroll to.
  2. Toggle the ID manually, in case you enabled the “Remove Classes & IDs” in the Cwicly options

image

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).

  1. Click the Link option on your Trigger Block
  2. Insert the Block ID from your Target Block (Step 1). Do not forget to prepend a hash sign (#)

OPTIONAL - Apply a Scroll Offset

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.

8 Likes

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:
anchor1
Do you have an idea of a workaround for that?
Thank you!
Greetings
Marc

1 Like

Hey @msteinlein.

Glad to hear you find it useful.

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.

1 Like

Thanks @Marius for this. Indeed, there’s a little bug in the CSS regeneration (Settings page) which will be fixed in the next update.

1 Like

Hey @msteinlein.

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).

You can see a demo here.
Section ID and anchor links using the same ACF field.

1 Like