How to Scroll to a Section in Elementor (Jump-to Guide)

If you're looking for the steps to setup “elementor scroll to section“, you're at the right place.

Trust me, it's pretty easy to setup (under 60 seconds) & it looks stunning.
You can view a live demo of the scroll to section effect which I've applied on one of my elementor page.

So whether you're building a one-page website, a long sales page, or just want that smooth user experience, adding a “scroll to section” effect in Elementor can make your site feel way more polished.

Let's dive in…

What Is “Scroll to Section” in Elementor?

It’s a quick little trick where clicking on a button, menu item, or link jumps the user to a specific section of your page. It's super handy for:

• One-page websites
• Hero buttons that lead to features or pricing
• Navigating between FAQ sections
• Or even just making your site feel smoother and smarter.

Step-by-Step: How to Scroll to a Section in Elementor?

Here's a step-by-step visual guide on how to scroll a section in Elementor…

Step 1: Add a CSS ID to the Section You Want to Scroll To

1. Open your page in the Elementor editor
2. Click on the section you want users to land on
3. Go to the Advanced tab
4. In the CSS ID field, give a section name, something like: features, cta, etc.

No # here – just the name (keep it lowercase with no spaces)

Step 2: Link Your Button or Text to That Section

1. Now, select the button (or text) you want users to click
2. Under the Link field, enter the section name that you gave with a #.

Here, we've to use the # as this tells the browser it's an anchor link.

3. That’s it! When clicked, the page will jump straight to that section.

Step 3: Preview and Test It Out

Hit Preview and give your new scroll feature a try.
Click the button or link — does it scroll down like butter?

Well, it should & that's it!

This is how you set elementor scroll to section (you like).

→ View Live Demo (Scroll Effect)

How to Add Smooth Scrolling Animation?

By default, most browsers scroll instantly. But Elementor supports smooth scrolling in most cases.
If not, here’s what you can do:

• Check your theme’s scroll behavior (as some WordPress themes provides smooth scrolling feature)
• Use an Elementor addon like ThePlusAddons (provides advanced animations)

Bonus: Scroll to Section from Navigation Menu (One-Page Sites)

Want to scroll to a section using your menu?
Here's how you can do it…

1. In WordPress > Appearance > Menus
2. Add a Custom Link
3. Set the URL to #features (or your CSS ID)
4. Label it like: “Features” or “Pricing”, etc.

Perfect for one-pagers or landing pages!

Common Mistakes to Avoid

• Adding the section name in the CSS Class field – nope, you need to add it in the CSS ID field.
• Adding # in the CSS ID field – don’t. Just use plain text like pricing, not #pricing.
• Spelling mismatch — #Features ≠ #features
• Forgetting to hit Update after editing
• Testing on preview but not on live — check both & on cross browsers!

Final Thoughts: Now You’ve Got Scroll Magic

That’s it — you just leveled up your Elementor site.

Adding smooth, jump-to-section behavior not only improves user experience but also gives your site a slick, professional feel.

You can repeat this method anywhere like homepage buttons, nav links, FAQs, etc.

Need help or want to learn more cool Elementor tricks?
Stick around, I’ve got loads of bite-sized guides coming your way.

Cheers,
Kuldeep – Your Elementor Guy