Section link

Section links or anchor links allow you to link to specific sections in a webpage. To create an anchor link, you'll first need to set an element ID on that section.

An element ID can also be used in custom code to point to a style in a style sheet or to manipulate a specific element with JavaScript. However, the most come use for an ID is in section links or anchor links to different sections on a page.

In this lesson

• Setting an element ID
• Configuring a section link
• Configure the scroll time
• Linking to a section on another page

Setting an element ID

You can assign an ID to any select element in the Settings panel (D).

An element ID should be unique for each element. It must contain at least one character and cannot contain any space characters.

Configuring a section link

1. Select the link element that you want to take you to a section on your page
2. In the settings panel, select the section ID from the page section dropdown menu

Configure the scroll time

Now, if you want to change the default scroll speed - we need to select our Body element, and then go over to our element settings where we can add a custom-attribute, data-scroll-time.

Adding custom attributes

1. Select the Body element
2. Go to the Element settings panel (D)
3. Add [+] a custom attribute
4. Specify the name (e.g. data-scroll-time)
5. Add the value (e.g. 3)
6. Save the attribute

Learn more about using Custom attributes here.

Linking to a section on another page

If you want a link element, such as a button, to link to a section on another page:

1. Select the button and choose the external link option in the link settings
2. Enter the URL of the page where the section exists followed by `#` and the element ID you assigned to that section

Here's how your anchor links would look like:

• a page in your current site: /page#section-ID
• if your page is nested in a folder: /folder/page#section-ID
• an anchor link on another website: //website.com/folder/page#section-id

Examples

On this page, we have 3 section links that link to the 3 article sections on this page.

1. Setting an element ID
2. Configuring a section link
3. Linking to a section on another page

To link to this last section of the page, the URL is: https://university.webflow.com/article/anchor-links#linking-to-a-section-on-another-page