Streaming live at 10am (PST)

Dynamic IDs in dynamic list items for inpage anchoring


#1

Hello, I would like to assign IDs to dynamic list items in order to use them as anchors.
I found another thread about this but I don’t understand how to do this.

Here is the preview of my project.
https://preview.webflow.com/preview/artpress?preview=1b6cb9cf7c432dcdcbe9a3e27a424bcd

Go the the page “referenzen” to see the example.
At the beginning of a page there are some links. The titles of the links come from a dynamic list. Scrolling down you can see some full screen sections. Those also come from the same dynamic list.
I would like to anchor the links at the beginning of the page to full screen sections.

Any help would be highly appreciated!

Thanks,
Dario.


Table of Contents?
#2
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  // Set dynamic list IDs based on h1 tag content
  $('.full-screen-block').each(function(i) { 
    $(this).attr('id', $(this).find('h1').first().text().toLowerCase().replace(/[^a-z]+/g, '-'));
  });
});
</script>

Also, feel free to contact me for further code help and/or customization of third-party plugins


#3

Hi Samliew, thank you for this code. Sorry for the ignorance, but how should I use it?


#4

Paste in Page Settings > Footer Code. Publish site.


#5

Hi Samliew, thank you for your help.
I did that already actually, but I don’t see it working.
54

I tried to give the h1 elements inside the dynamic list an ID and then anchoring them to the links above the fold but without success. I tried in different ways but nada.

The confusion comes from the fact that the custom code becomes active only after publishing the website. So I can’t see the option of anchoring the links in the Designer.

Could you explain me a little bit how this code should work?

Thanks!


#6

Custom code only works in the published site…

Your IDs are there…


#7

OMG, I had it working!
I added a field in the collection called “anchor link” and I populated it with the in-page links such as “http://artpress.webflow.io/referenzen#biennale-di-venezia
00

then I connected the links to this field.
25

Thanks so much Samliew!


#8

Can someone explain what the code actually does so I can understand how this works. It sets the ID for each H1 heading to match the name?