intermediatewebflownavigation

How to link to a section on the same page?

Flowversity··2 min read

Linking to a specific section within the same page is a common need for single-page sites, long-form landing pages, and documentation-style layouts. In Webflow, this is handled through anchor links — a combination of section IDs and link URLs that point to them.

Setting Up Anchor Links in Webflow

The process involves two parts: giving the target section a unique ID, then creating a link that points to that ID.

Step 1 — Add an ID to the target section

Select the section (or any element) you want to link to. Open the Settings panel on the right sidebar and find the Element ID field. Enter a descriptive, lowercase ID with no spaces — for example, pricing or contact-form.

Step 2 — Create the link

Select the element you want to act as the link (a text link, button, or nav item). In the Link Settings, choose Section (anchor) as the link type, then select the section you just named from the dropdown. Alternatively, you can set the URL to #your-id manually.

Linking to a Section on Another Page

If you need to link to a section on a different page, use a standard page link and append the anchor. In the link URL field, enter the full path followed by the hash and ID — for example, /about#team. This works for both static pages and CMS-driven pages in Webflow.

Tips for Reliable Anchor Links

  • Use simple, lowercase IDs without special characters
  • Avoid duplicate IDs on the same page — each ID must be unique
  • Test on the published site, not just in the Designer preview
  • If you have a fixed navbar, account for the offset so the section isn't hidden behind it

Anchor links are a straightforward way to improve in-page navigation and help users jump directly to relevant content without scrolling.

Want to skip the build?

Browse 60+ premium templates and launch your site in days, not weeks.

Explore Templates