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?
TL;DR
- Use a Collection List to display subtopics and assign each a unique ID using a dynamic CMS field like a slug.
- Create buttons or links bound to the same dynamic field, linking to the corresponding section using anchor links (e.g., #slug) for smooth scrolling.
To create scroll buttons on a Webflow CMS page that navigate to dynamically generated subtopics in a Collection List, you’ll need to use Anchor Links and unique Element IDs based on CMS content.
1. Structure Your CMS Items
- Use a Collection List to display each subtopic.
- Inside each Collection Item, place a div or heading that will act as the scroll anchor.
- Give this element a unique ID based on the CMS field, such as a slug or title.
2. Assign Dynamic IDs to Each Subtopic
- Select the element in the Collection Item where you want to scroll to (e.g., an
h2heading). - In the Element Settings panel (D key), go to ID under Custom Attributes.
- Click the "Add field" button inside the ID input and insert a dynamic field like
SlugorSubtopic Title. - Optional: Use a slugified version to ensure the ID is URL-safe (e.g., lowercase with hyphens).
3. Create CMS Buttons That Scroll to Anchors
- Create a Rich Text field, plain text, or separate Collection List containing your scroll buttons in the Template Page.
- Use Link Blocks or Buttons and set their link type to Page Section.
- In the URL field, link to
#subtopic-slug, wheresubtopic-slugis the same dynamic field you used earlier for the ID. - Again, bind the link to the same CMS value so the link and ID match (e.g.,
#{{Slug}}).
4. Ensure Smooth Scrolling Is Enabled
- Webflow automatically adds smooth scrolling when using anchor links, but make sure:
- You're linking on the same CMS template page (not across different pages).
- There are no conflicting custom scripts that disable scrolling behavior.
5. Test and Validate
- Publish the site and load a CMS item page.
- Click a scroll button—your page should jump smoothly to the correct subtopic within the Collection List.
Summary
To enable scrollable buttons to CMS subtopics in Webflow, assign dynamic IDs (e.g., from slugs) to each Collection List item’s heading or wrapper, then use anchor links pointing to those IDs in your buttons. This creates smooth, dynamic navigation on CMS pages without needing custom code.
