I’m trying to create links that take you to a section on the page within a dynamic list. Usually I would simply give it an ID and link it up (eg: /brandandproductfilms#collier).
However, as it’s in a dynamic list, I can’t label each item separately, so it doesn’t work.
Does anyone know how I could achieve clicking on the links at the top, and the page scrolls to the sections within the dynamic list?
The page is Brand and Product Films
And to be clear, I would like to be able to click on the links “Collier’s Cheese”, “Tricker’s Shoes” and “Dualit”, and for them to take me to the relevant section within the dynamic list.
I don’t see a way using the structure you have used here, which is the correct structure to use.
But if for any reason you don’t want to list more than 3 or 4 films by category, you could have 3 static sections with IDs “one” “two” and “three”, use one dynamic list in each, limited to 1 result, respectively starting at slot 1 2 and 3, and then use the IDs to link to sections.
Note: don’t use digits to start an ID name or you will lose the smooth scroll, it will jump straight to the section.
I did consider this too, however does this create a limitation when the client needs to upload more films? I guess I’d need to create empty spaces for more films to slot into.
One thought I had was to bodge it by creating a sneaky hidden div with blocks in with the IDs over the list – it actually kind of worked but I came to the same devastating realisation that this wouldn’t work with the CMS either.
Do have any further ideas? The client is adamant that the structure should be like this. Is there something in the CMS itself you think I could use? I’m fairly new to using the Webflow CMS and this is my most ambitious site yet, so I’m really hoping there’s something out there I’ve missed!
Yes, it’s using the CMS in a very silly way, putting manual where there’s automation. I was kind of ashamed suggesting this. Definitely don’t do it for a client.
Yes. You could have a 1px column with transparent divs for targets, providing your items are always the same height.
Well, there is ALWAYS Javascript. You can add whatever hidden or shown infos to your posts so Javascript could navigate to them, even do a barrel roll on the way. You can either look online for a ready made code you can modify or ask for a JS developer to make it. Shouldn’t be expensive (1hr work, 60-90 dollars). What you can’t do is asking me because I know nothing at JS
You can test this on a copy of your project, or revert a backup if you don’t prefer this.
Remove linky-block
Paste this in the Page Settings > Custom Code > Footer Code
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
// Set dynamic list IDs based on links in the intro paragraph
var links = $('.para a').map(function() { return $(this).attr('href').slice(1); });
$('.w-dyn-item').each(function(i) { $(this).attr('id', links.get(i)); });
});
</script>
Make sure the paragraph has the same number of links for each dynamic items. You can name the #id links whatever you want, just make them unique, like #1, #2, #3.
First link will now link to first dynamic item, second link to second item, etc.
Hi @lizziekevan, I think there was a problem with pasting the code, here you go:
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
// Set dynamic list IDs based on links in the intro paragraph
var links = $('.para a').map(function() { return $(this).attr('href').slice(1); });
$('.w-dyn-item').each(function(i) { $(this).attr('id', links.get(i)); });
});
</script>
You have to add a url field and manually link to the previous item in the collection. If you delete one, you have to remember to re-link the item that links to it.
Hope you’re well and thanks for your help on this issue earlier in the month.
I am hoping you can help again (help!!!) – I just went into the pages where I’m using the solution you kindly gave me, just to make some amends – and, where I have edited the links, they are no longer working!
I have no idea at all what I’ve done, and I’m on a desperately tight deadline – plus adding to the general tension of the whole situation, for some reason I can no longer edit the page “Brand and Product Films”, but I’m hoping this is just a temporary, unrelated glitch that will sort itself out…
Any thoughts would be hugely, massively appreciated.
