Webflow sync, pageviews & more.
NEW

How can I assign an in-page link to individual team members in a collection list on a Webflow page without using individual collection pages?

TL;DR
  • Add unique IDs to each Collection List item using the Element Settings or a custom Embed with CMS fields.
  • Create in-page links (e.g., buttons, sidebar) pointing to those IDs using #anchor.
  • Optionally, adjust scroll position with padding, scroll-margin, or JavaScript to account for overlapping headers.

You can assign in-page anchor links to individual team members in a Collection List on a Webflow page by setting unique IDs on elements and linking to them using #anchors—all within the same page and without creating CMS Collection Pages.

1. Add a Unique Anchor ID to Each Item

  • Open the Collection List that contains your team members.
  • Select the element you want to scroll to (e.g., the team member's card or container).
  • In the Element Settings panel (D), set a unique ID for each item, like team-member-1, team-member-jane, etc.
  • Since Webflow doesn't allow dynamic CMS fields as IDs directly, you'll need a custom code workaround (see Step 3).
  • Anywhere on the same page (like a sticky menu, sidebar, or buttons), add a Link Block or Text Link.
  • In the Link Settings, choose Page Section and type the corresponding anchor with # (e.g., #team-member-jane).

3. Use Custom Code to Assign Dynamic IDs (Optional)

Webflow does not let you bind CMS fields directly as element IDs, but you can do it with custom Embed code:

  • Drag an Embed element inside each Collection Item.
  • Paste this inline code:
    <div id="team-{{cmsSlug}}"></div>
  • Replace {{cmsSlug}} with the slug field or any unique CMS field from the team's Collection using Webflow's field picker (looks like a purple "Add Field").
  • Then target this id with your in-page links (e.g., #team-john-smith).

4. Adjust Page Scroll Position (Optional)

If your header overlaps the scrolled-to item:

  • Add top padding or use JavaScript for offset scroll.
  • Or use scroll-margin-top in Custom CSS:
    Add a custom style tag in the Page Settings or Embed:
    <style>.team-anchor { scroll-margin-top: 100px; }</style>
  • Then assign the class team-anchor to each item with an id.

Summary

To create internal anchor links to Collection List items on a single Webflow page, assign unique IDs manually or via a custom Embed element using CMS fields. Then link to them using #anchor links in buttons or menus. This bypasses the need for separate CMS Collection Pages.

Rate this answer

Other Webflow Questions