How to Add Elementor Jump to Section With Anchor Links

Updated onJune 17, 2026By

Key Takeaways

  • Anchor links in Elementor enable users to jump to specific sections of a page quickly.
  • Creating anchor links involves assigning a CSS ID to the desired section and linking to it.
  • The Menu Anchor widget facilitates the creation of anchor links in Elementor navigation menus.
  • Smooth scrolling can be enabled by adding CSS code 'html { scroll-behavior: smooth; }' to enhance user experience.
  • The Plus Addons for Elementor offers additional widgets like Smooth Scroll for improved navigation features.

An Elementor jump to section link works in two moves: give the target section a CSS ID in its Advanced settings, then point any button, menu item, or text link at #that-id. Click it and the page scrolls straight to that section. No plugin required, and it works in free Elementor.

Anchor links (also called jump links) are what make long pages usable. A table of contents that drops readers to the right heading, a sticky menu that scrolls to each section, a “back to top” button: all of them are anchor links.

This guide covers every way to build them in Elementor, how to attach an anchor to each type of element, how to link across pages, how to add smooth scrolling, and what to check when a jump link refuses to jump.

Table Of Contents

What are anchor links in Elementor?

An anchor link is a link that points to a specific spot on a page instead of to a different page. It has two halves: the anchor, a unique ID on the element you want to reach, and the link, a hash reference to that ID such as #services.

When the two match, the browser scrolls the matching element into view.

Youtube video

They are worth setting up because they make a page easier to move around:

  • Table of contents: let readers jump to the part they came for.
  • One-page sites: a top menu that scrolls to Home, About, Services, and Contact sections.
  • Long landing pages: a hero button that drops visitors straight to pricing or sign-up.
  • Back to top: a quick return link from the footer to the header.

New to the builder? Read our full Elementor Review first.

How to add an Elementor jump to section with anchor links in 2 steps

This is the core technique. Master these two steps and every other case below is just a variation.

Step 1: Create the anchor with a CSS ID

Select the section, container, or widget you want to jump to. Open the Advanced tab and, in the CSS ID field, type a short, unique, lowercase name with no spaces, for example services. That ID is now your anchor.

Setting a css id in the elementor advanced tab
Give the target section a unique CSS ID in the Advanced tab.

Step 2: Link to the anchor

Now point something at it. In the link field of a button, menu item, or text link, enter the ID with a hash in front, like #services. Update the page, and clicking that link scrolls the visitor straight to the section you tagged.

Linking an elementor button to an anchor css id
Point any link at #your-id to make it jump to that section.

Want polished page transitions to go with your jump links? See how to add Elementor Preloader & Page Transitions.

Setting up anchors for different Elementor elements

The CSS ID method works on almost any element. Here is how it plays out on the ones you will use most.

Case 1: Text editor widget

To jump to a block of text, select the Text Editor widget, open Advanced, and give it a CSS ID. Then link any element to #that-id. This is handy for sending readers to a specific definition or paragraph further down the page.

Adding a css id to an elementor text editor widget
A CSS ID on a Text Editor widget turns any paragraph into a jump target.

Case 2: Image widget

Images work the same way. Add a CSS ID to the Image widget in the Advanced tab, then link to it. Useful for galleries or product shots you want a menu or button to scroll to directly.

Setting a css id on an elementor image widget
Image widgets accept a CSS ID anchor just like any other element.

Case 3: Button (the most common use case)

Most jump links start from a button. Here the button is the source, not the target: select it, and in the Link field enter the anchor of the section you want to reach, such as #pricing.

A hero button that scrolls to pricing or a contact form is the highest-converting use of anchor links.

Linking an elementor button to a section anchor
Put the target anchor in the button’s Link field to scroll on click.

Case 4: One-page scroll navigation

For full one-page sites where each section fills the screen and the menu scrolls between them, a dedicated tool is cleaner than wiring every ID by hand. The One Page Scroll Navigation widget from The Plus Addons builds that experience visually.

The One Page Scroll Navigation documentation walks through the setup.

One Page Scroll Navigation turns sections into full-screen panels with a scrolling menu.

How to add anchor links in Elementor navigation menus

To make a header menu scroll to sections, first give each section its CSS ID as in Step 1. Then go to Appearance > Menus, add a Custom Link item, and set its URL to the anchor, for example #about.

Give it a label, add it to the menu, and save. Now the menu item scrolls to that section instead of loading a new page.

Adding anchor links to an elementor navigation menu
Use a Custom Link menu item set to #section-id for a scrolling header menu.

Building out your toolkit? See the 8 Best Elementor Addons for WordPress.

How to create anchor links to different pages in Elementor

Anchors are not limited to the current page. To link from one page to a section on another, use the full page URL followed by the anchor, like https://yoursite.com/about/#team.

The browser loads the page first, then scrolls to the matching ID. This is perfect for a homepage button that sends visitors to a specific section of your About or Services page.

Creating cross-page anchor links in elementor
For cross-page jumps, use the full URL plus #the-anchor-id.

Bonus: enable smooth scrolling for jump links

By default a jump link snaps instantly to the target, which can feel jarring. Smooth scrolling animates the movement so the page glides to the section. The simplest way is one line of CSS. Go to Appearance > Customize > Additional CSS and add:

html {
  scroll-behavior: smooth;
}
Enabling smooth scrolling with a css snippet
One line of CSS in the Customizer turns every jump link into a smooth scroll.

If you would rather not touch code and want more control over speed and offset, the Smooth Scrolling Effect for Elementor handles it visually, with settings for scroll speed and easing.

Smooth scroll widget customization options
The Smooth Scrolling Effect widget gives you speed and easing controls without code.

Troubleshooting Elementor jump to section links

If a jump link does not behave, run through these common causes:

  • The hash is missing. The link must start with #. services will not work; #services will.
  • The ID and the link do not match. CSS IDs are case sensitive. #Services will not reach an anchor named services.
  • The ID is not unique. Two elements sharing one ID confuse the browser. Use each ID only once per page.
  • Spaces or symbols in the ID. Stick to letters, numbers, and hyphens, with no spaces.
  • A sticky header hides the section. A fixed header can sit over the spot you jump to. Add a little scroll-margin-top to the target, or use the Smooth Scrolling widget’s offset setting, so the section lands below the header.

Wrapping up

Elementor jump to section links come down to one pattern: tag the target with a CSS ID, then link to #that-id. From there you can drive them from buttons, menus, text, and images, link across pages with a full URL, and smooth out the motion.

Add a little scroll offset when a sticky header is in the way, and your navigation will feel effortless.

For animated, offset-aware jumps without code, the Smooth Scrolling Effect from The Plus Addons for Elementor is the quickest finishing touch.

How to add elementor jump to section with anchor links
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​
[contact-form-7 id="125716"]

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO at POSIMYTH Innovations · The Plus Addons for Elementor · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressThemesElementorn8nAIClaudeAutomationServer
X GitHub YouTube Website
Join the Elementor Facebook community

Related Frequently Asked Questions

Related Blogs