How do I link to a section on a Webflow page?

Put a unique ID on the target

A section link, also called an anchor, needs an ID on the element people should land on. Select that element. Open the Element settings panel. Type the ID in the ID field.

The ID needs at least one character, and it cannot contain a space. Use a short name you will still understand next month, such as pricing-plans. The ID should be unique for each element. The same ID on more than one element may make a screen reader target only the first match, so a person can miss the later one. Give this section its own ID before you build the link.

You can also use an ID as a hook for custom code. On a normal marketing page, the reason to add one is the link itself.

Link to that ID from the same page

Select the text link, button, or link block that should move the visitor. Open Element settings, then Link settings. Click Page section. Open the Section dropdown and choose the ID you created.

That link stays on the current page and scrolls to the element. Use it on a long service page when a button in the hero should land on a block further down, such as the plans section.

Page section only offers IDs from the page you are editing. If the ID is missing from the dropdown, the ID is on a different page, or it was not saved on an element of this page. Check the target, then open the dropdown again.

Link from another page, including the homepage

A button on the homepage that should open a block on the pricing page uses the URL link type, not Page section.

Open Link settings and choose URL. The address is the page URL, then #, then the ID. A page at site.com/pricing with the ID pricing-plans uses site.com/pricing#pricing-plans. If the page sits in a folder, include the folder: site.com/services/pricing#pricing-plans.

The homepage is the exception. Leave the page name out. Type the domain, a slash, #, and the ID. A homepage anchor looks like site.com/#pricing-plans.

Example: the homepage has a button labeled See plans. The pricing page has a section whose ID is pricing-plans. The homepage button uses a URL link to https://example.com/pricing#pricing-plans. A second button that already lives on the pricing page uses Page section and the same ID, with no full URL.

Publish, then click both buttons on the live site. The address bar should include #pricing-plans, and the plans block should sit in view. If the hash is missing, the link is still a normal page link and never received the ID.

When the scroll stops in the wrong place

The ID can be correct and the scroll can still miss. Section link scrolling can be thrown off by images set to Lazy: loads on scroll. The browser estimates page height from what has loaded. Lazy images arrive later, the page gets taller, and the link stops above or below the section you named.

The section link article gives two fixes. Set those images to Eager: loads with page, so their height is part of the first layout. Or place the images inside elements that already have a fixed height, so the page does not grow when the file arrives.

Change one of those, publish again, and click the same link. If the plans heading is where you expected, the ID and the layout now agree. If it is still off, check for a second element that reused pricing-plans, and rename the extra one.