How to Create Anchor Links and One-Page Scrolling in Elementor

One-page websites are perfect for portfolios, events, small businesses, and product launches. Instead of navigating between pages, visitors click a menu item and the page glides smoothly to the right section. The magic behind it is surprisingly simple: anchor links.

In this tutorial you will learn how anchor links work in Elementor, how to build a one-page menu, how to stop a sticky header from covering your section titles, and how to make the whole experience feel polished on desktop and mobile.

How Anchor Links Work

An anchor link has two parts:

• The target: an element on the page with a unique ID, for example services.
• The link: a URL that points to that ID with a hash, for example #services.

When a visitor clicks the link, the browser scrolls to the element with that ID. If the link points to another page, such as /home/#services, the browser opens that page and then jumps to the section.

Step 1: Give Each Section an ID

1. Select the container that holds the section.
2. Open the Advanced tab, or the settings area that holds attributes for atomic elements.
3. In the CSS ID field, enter a short, lowercase name without spaces or the # symbol, for example services, about, pricing, or contact.

Each ID must be unique on the page. Use hyphens for multiple words, such as how-it-works.

Alternative: the Menu Anchor widget

Elementor also has a Menu Anchor widget. Drop it just above a section and give it an ID. It is handy when you want the scroll to stop slightly above the section, or when you cannot easily set an ID on the container.

Step 2: Create the Links

In buttons and text

In any link field, enter the hash and ID, for example #pricing. A hero button labeled "See pricing" can then jump straight to that section.

In the navigation menu

1. Go to Appearance > Menus.
2. Add a Custom Link for each section.
3. For the URL, use the full path if the menu appears on other pages too, for example /#services. This way the link works from every page, not only the home page.
4. Give each item a clear label.

Add the menu to your header with the Nav Menu widget.

Step 3: Fix the Sticky Header Overlap

With a sticky header, the browser scrolls the section to the very top of the window, and your header covers the section title. Two clean solutions:

• CSS scroll padding: add html { scroll-padding-top: 90px; } to your site-wide custom CSS, using the height of your sticky header. The browser automatically leaves that space above every anchor target.
• Offset with Menu Anchor: place the Menu Anchor widget slightly above each section, or use spacing so the anchor sits higher than the section content.

The scroll padding approach is usually simpler and works for every anchor on the site at once. Adjust the value per breakpoint with a media query if your mobile header is shorter.

Step 4: Smooth Scrolling

Elementor scrolls smoothly to anchor targets on the same page by default, which feels much nicer than an instant jump. If you also want smooth scrolling for links coming from other pages, you can add html { scroll-behavior: smooth; } in your custom CSS. Visitors who prefer reduced motion can be respected with a media query that turns it off.

Step 5: Highlight the Active Menu Item

On one-page sites, it helps to show which section the visitor is currently viewing. The Nav Menu widget can style the active item, and with anchor links it updates as the visitor scrolls. Style the active state with your accent color or an underline so it is easy to spot.

Step 6: Close the Mobile Menu After Clicking

On mobile, the dropdown menu should close when a visitor taps a section link; otherwise it covers the content they just jumped to. Check this behavior in the Nav Menu settings and test it on a real phone.

One-Page Design Tips

• Keep the order logical. Hero, about or benefits, services, work, testimonials, pricing, contact.
• Use clear section headings. Visitors who jump in mid-page should immediately know where they are.
• Add a "Back to top" button for long pages.
• Do not overload one page. If the page becomes extremely long, separate pages may serve visitors and SEO better.

Troubleshooting

• Link does nothing. Check that the ID matches exactly, including spelling and lowercase, and that the link starts with #.
• Link jumps to the wrong place. Lazy-loaded images above the target may change the layout after the jump. Reserve image space with dimensions or aspect ratios.
• Works on home page only. Use /#section instead of #section in menus shown on all pages.
• Section title hidden under header. Add or increase scroll-padding-top.

Wrapping Up

Anchor links turn a long page into an easy-to-navigate experience. Give sections clear IDs, link to them from buttons and menus, add scroll padding for your sticky header, and test on mobile. With those details in place, your one-page site will feel smooth, intentional, and professional.