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?


#9

Hi There,

Thanks so much for this advice. However, in my site it doesn’t change the ID’s for some reason. All else seems to be incorporated but the elements do not receive an ID to anchor to, could you help me with this? the site is http://Notre-dame.webflow.io/informatie-voor-leerlingen Thanks a lot!


#10

IDs can be set in the settings tab of the selected element.