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-to-subtopic buttons on a CMS page in Webflow, each button must link to an anchor ID that corresponds to a dynamically generated topic within a Collection List. Here's how to do it:

1. Add a Unique ID to Each Subtopic (Using CMS)

• Go to your CMS collection and ensure each subtopic has a slug or unique identifier field (like a custom “Anchor ID” field).
• In your Collection List, select the element you want users to scroll to (e.g., a heading).
• In the Element Settings Panel, enter a dynamic ID by setting the ID field to something like subtopic-[Slug].
• Use a text field like Slug or Anchor ID from the CMS collection.
• Example: If the slug is introduction, the element ID should be subtopic-introduction.

2. Create Buttons That Link to Each Subtopic

• Still within the same CMS Collection Page, add a Collection List Wrapper for the list of navigation buttons.
• Inside that list, add a Button or Link Block.
• Set the href of the link to #subtopic-[Slug] using the Add Field dropdown for dynamic data.
• Example: #subtopic-introduction

3. Ensure Smooth Scrolling is Enabled

• Go to Page Settings of the CMS Template Page where this setup lives.
• In the Body, make sure the scroll behavior is set to Smooth:
• Select the body element
• In the Style panel, under Layout > Overflow, enable Smooth Scroll

4. Optional: Offset for Fixed Navigation

• If you have a fixed navbar, the scroll might cut off part of the heading.
• Add custom code in Page Settings > Before tag to offset anchor scrolling using JavaScript (Webflow doesn’t natively offset anchors).

Example inline code:

<script>  document.querySelectorAll('a[href^="#subtopic-"]').forEach(anchor => {    anchor.addEventListener('click', function (e) {      e.preventDefault();      const offset = 80; // height of your nav      const target = document.querySelector(this.getAttribute('href'));      window.scrollTo({        top: target.offsetTop - offset,        behavior: 'smooth'      });    });  });</script>

Summary

To create scroll-to-subtopic buttons on a CMS page in Webflow:

• Add a dynamic ID to each subtopic using a CMS field (e.g., subtopic-[Slug]).
• Create link buttons with href="#subtopic-[Slug]".
• Enable smooth scroll in body settings.
• Apply a scroll offset script if using fixed navigation.

This setup ensures that each button scrolls smoothly to its corresponding dynamic subtopic.