How can I use Webflow to create buttons on a CMS page that scroll down to relevant subtopics in a collection list, where each subtopic has a dynamically generated ID?

To create scroll buttons on a CMS page in Webflow that link to specific subtopics in a collection list with dynamically generated IDs, follow these steps to generate and connect dynamic anchor links.

1. Create Unique IDs for Each Subtopic

• In the CMS Collection List where subtopics are rendered, add a custom ID attribute to the element you want to scroll to (e.g., an H2 heading or a div).
• Select the element, go to the Element Settings panel, and under Custom Attributes, add:
• Name: id
• Value: Use a dynamic CMS field to make it unique, such as slug or a combination like subtopic-{{slug}}.

Example: If your Slug field is "history", the resulting ID would be "subtopic-history".

2. Create Scroll Buttons Based on CMS Items

• Create another Collection List elsewhere on the page (or within the same template page), which acts as your button menu.
• For each item, add a Button or Link Block/Text Link, and in the Link Settings, choose:
• Link to: URL
• In the URL field, input: #subtopic-{{slug}}

Prepend the CMS Slug with #subtopic- to match the ID set earlier.

3. Enable Smooth Scrolling

• To enable smooth scrolling behavior:
• Click Page Settings (gear icon beside the page name).
• Under Custom Code → Inside , add inline CSS:
  • <style>html { scroll-behavior: smooth; }</style>
• Alternatively, use Webflow interactions to animate scroll on click if more control is needed.

4. Test on Published Site

• This linking method works only on the published site, not within the Webflow Designer preview.
• Publish and test the scroll buttons to ensure they jump to the correct sections.

Summary

Create dynamic IDs on CMS subtopics using the Slug field, and link to those with hash anchor links like #subtopic-{{slug}}. This setup enables in-page scrolling to specific CMS-generated content.