--- title: "How to Add Elementor Jump to Section With Anchor Links" url: https://theplusaddons.com/blog/add-elementor-jump-to-section-with-anchor-links/ date: 2023-08-14 modified: 2026-06-17 lang: en author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2023/08/How-to-Add-Elementor-Jump-to-Section-With-Anchor-Links-1024x536.png word_count: 1254 --- # How to Add Elementor Jump to Section With Anchor Links ## - 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. https://www.youtube.com/shorts/Stkew7kthsM 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**](https://theplusaddons.com/blog/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](https://theplusaddons.com/wp-content/uploads/2023/08/Creating-Anchor-Links-in-Elementor-with-CSS-ID-1024x690.jpg)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](https://theplusaddons.com/wp-content/uploads/2023/08/Linking-Element-with-CSS-ID-for-Anchor-Link-1024x554.jpg)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**](https://theplusaddons.com/blog/elementor-preloader-and-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](https://theplusaddons.com/wp-content/uploads/2023/08/Elementor-Text-Box-1024x593.jpg)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](https://theplusaddons.com/wp-content/uploads/2023/08/Elementor-Image-1024x611.jpg)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](https://theplusaddons.com/wp-content/uploads/2023/08/Elementor-Button-1024x608.jpg)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](https://theplusaddons.com/elementor-builder/header-builder/one-page-scroll-navigation/) from The Plus Addons builds that experience visually. The [One Page Scroll Navigation documentation](https://theplusaddons.com/docs/setup-one-page-scrolling-vertical-panel/) 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](https://theplusaddons.com/wp-content/uploads/2023/08/How-to-Add-Anchor-Links-in-Elementor-Navigation-Menus-1024x784.jpg)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**](https://theplusaddons.com/blog/best-elementor-addons/).* ## 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](https://theplusaddons.com/wp-content/uploads/2023/08/How-to-Create-Anchor-Links-to-Different-Pages-in-Elementor-1024x559.jpg)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](https://theplusaddons.com/wp-content/uploads/2023/08/How-to-Enable-Smooth-Scrolling-in-Jump-Section-618x1024.jpg)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](https://theplusaddons.com/elementor-widget/smooth-scroll/) handles it visually, with settings for scroll speed and easing. ![Smooth Scroll widget customization options](https://theplusaddons.com/wp-content/uploads/2023/08/Edit-Smooth-Scroll.png)The [Smooth Scrolling Effect widget](https://theplusaddons.com/elementor-widget/smooth-scroll/) 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](https://theplusaddons.com/elementor-widget/smooth-scroll/) from The Plus Addons for Elementor is the quickest finishing touch. ![20+ Checklist for WordPress Site Maintenance eBook](https://theplusaddons.com/wp-content/uploads/2023/05/20-Checklist-for-WordPress-Site-Maintenance-1024x1024.jpg) ##### Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​ [contact-form-7] Field LabelSend Me the eBook