To add an Elementor jump to section with anchor links, assign a unique CSS ID to the target container or widget in the Advanced tab, then link any button, menu item, or text to #your-css-id. That is the entire trick. The rest of this guide shows you exactly where to click in the current Elementor interface, how to handle links across different pages, and how to add smooth scrolling so the jump feels polished instead of jarring.
Anchor links are one of the fastest ways to improve navigation on long Elementor pages. They let visitors skip straight to the content they care about, which reduces bounce rate and makes your layout feel designed rather than dumped. This tutorial covers every practical case, from simple in-page jumps to cross-page deep links and the Menu Anchor widget.
What Are Anchor Links in Elementor?
Anchor links are internal page links that jump a visitor to a specific spot on the same page (or to a specific spot on a different page) the moment they click. You have seen them everywhere: clickable tables of contents, “Jump to pricing” buttons, and navigation menus on one-page websites.
In Elementor, an anchor is any element with a unique identifier that the browser can scroll to. You create the identifier in one place (the Advanced tab of a container, section, or widget) and reference it from another using the # symbol followed by the ID.
Two things do the heavy lifting here:
- CSS ID field (Advanced tab): adds an
idattribute to any Elementor element. This is the native, all-purpose method. - Menu Anchor widget: a lightweight widget you drop at the top of a section. It renders an empty anchor point, which is handy when you want the scroll target to sit above a heading rather than on it.
Is Elementor the best WordPress page builder till date? Check out our detailed Elementor Review blog.
How to Add Elementor Jump to Section With Anchor Links in 2 Steps
Here is the short, repeatable process that works across the current Elementor editor (v4 with Containers) and older layouts that still use Sections.
Step 1: Create an Anchor With a CSS ID
- Open the page in the Elementor editor.
- Click the handle of the container (or section) you want people to land on.
- Open the Advanced tab in the left panel.
- In the CSS ID field, type a unique name. Use only letters, numbers, hyphens, and underscores. Do not include the
#. - Click Update.
Good ID names describe the content: pricing, features, book-demo. Avoid generic names like section-1 which break the moment you rearrange your layout.
Step 2: Link to the Anchor
Now point any clickable element at the ID:
- Same page: use
#your-idin the Link field. Example:#pricing. - Different page: use the full URL plus the hash. Example:
https://example.com/about/#contact-us.
Save, preview, and click the link. The browser should scroll the target container to the top of the viewport. If it does not, jump to the troubleshooting section below.
Did you know if your pages take more time to load, the visitor might bounce off? That’s where preloaders can come to your rescue. Check out How to add Elementor Preloader & Page Transitions in this step by step blog.
Setting Up Anchors for Different Elementor Elements
The Advanced tab sits on every Elementor element, so the pattern is identical whether you are anchoring a container, a text box, an image, or a button. The differences are cosmetic. Here is how each case actually plays out.
Case 1: Text Box
Select the Text Editor or Heading widget, open Advanced, and add a CSS ID. Useful when you want a link to land on a specific paragraph rather than the whole section.
Case 2: Image
Same flow: click the Image widget, open Advanced, set the CSS ID. Handy for portfolio pages where you want to link directly to a specific visual.
Case 3: Button (the Most Common Use Case)
- Add a Button widget.
- In the Content tab, enter button text like “See pricing”.
- In the Link field, type
#pricing(or the full URL plus hash for a different page). - Update the page.
The same link format works for Icon Box, Call to Action, and any other Elementor widget with a link field.
Case 4: One Page Scroll Navigation
For dedicated single-page sites where each anchor is a “slide”, the One Page Scroll Navigation widget from The Plus Addons for Elementor handles full-screen snap scrolling, side dot navigation, and active-section highlighting out of the box. Step by step setup lives in the One Page Scroll Navigation documentation.
How to Add Anchor Links in Elementor Navigation Menus
Navigation menus are where anchor links earn their keep. Instead of sending people to fresh URLs, a single-page menu scrolls them around the same page. Here is how to wire one up.
- Drop a Menu Anchor. In the section you want to link to, drag the Menu Anchor widget to the top. Give it a short name (e.g.,
servicesorcontact-us). No#in this field. - Create a WordPress menu. Go to Appearance > Menus, create a new menu, and save it.
- Add custom link items. In the menu editor, expand Custom Links. Enter
#services(or whichever anchor name) in the URL field and a label in the Link Text field. Click Add to Menu. - Save the menu.
- Render it with Nav Menu. In your header template, use Elementor’s Nav Menu widget (Elementor Pro) and select the menu you just created.
If you run a single-page site, make sure every menu link starts with the hash alone (#pricing, not /#pricing) so the scroll works from any device.
Are you looking for additional widgets for Elementor to supercharge your website? Check out the 8 Best Elementor Addons for WordPress.
How to Create Anchor Links to Different Pages in Elementor
Cross-page anchor links work the same way as same-page links, except you prepend the full URL of the target page.
- On the target page, give the destination container or Menu Anchor a CSS ID (for example,
contact-us). - Publish or update that page.
- On the source page, paste the full URL plus hash into the Link field:
https://example.com/about-us/#contact-us. - Save and test. The browser loads the new page, then scrolls to the anchor automatically.
One thing worth knowing: some caching and optimization plugins defer JavaScript in a way that can break the automatic scroll-to-anchor behavior on first load. If a cross-page link lands at the top of the page instead of the anchor, start by disabling deferred or delayed JS for that page and test again.
Bonus: Enable Smooth Scrolling for Jump Links
By default, an anchor link in most browsers snaps instantly to the target. That works but feels abrupt. Smooth scrolling animates the jump so visitors keep their bearings.
The simplest fix is three lines of CSS. Add this to Appearance > Customize > Additional CSS or your theme’s custom CSS area so it applies site-wide:
html {
scroll-behavior: smooth;
}
That is it. Every anchor link on the site now glides instead of snapping. Modern browsers (Chrome, Firefox, Safari, Edge) all support this natively.
For finer control (custom duration, easing curve, offsets for fixed headers), try the Smooth Scrolling Effect for Elementor widget from The Plus Addons for Elementor. It exposes those options as visual controls, which is useful when scroll-behavior: smooth feels too fast or too slow.
Customization options in the Smooth Scrolling Effect widget by The Plus Addons for Elementor.
Troubleshooting Elementor Jump to Section Links
When an anchor link misbehaves, it is almost always one of these four causes:
- Sticky header covering the section. The browser scrolls the target to the top of the viewport, which sits behind the header. Fix it by adding
scroll-margin-top: 100px;(or whatever your header height is) to the target element’s CSS, or by placing a Menu Anchor widget above the section instead of on it. - Invalid characters in the ID. Only letters, numbers, hyphens, and underscores are allowed. Spaces and special characters break the link.
- Duplicate IDs on the page. Browsers scroll to the first match. If you accidentally reuse an ID, the link lands at the wrong spot.
- JavaScript defer breaking cross-page jumps. If the page loads and ignores the hash, turn off deferred or delayed JS for that URL in your caching plugin and retest.
Wrapping Up
Anchor links in Elementor come down to one skill: setting a CSS ID on the destination, then referencing it with #. Once that clicks, every other flavor (button links, menu items, cross-page deep links, smooth scroll) is a small variation on the same pattern. Use a Menu Anchor widget when you want the scroll target to sit above the visible content, and reach for a dedicated widget like Smooth Scrolling Effect when the default animation does not match your brand feel.
Ship a handful of these on your longest pages and watch where readers start clicking. It is one of those low-effort upgrades that makes a site feel meaningfully more considered.
