How to Fix Elementor Popup Auto Scroll Issue 100% Fix Guarantee

Introduction

Did you know over 13 million websites are created using Elementor? However, there are also many weaknesses of using Elementor. One of them is bugs. One of the most irritating bugs is the Elementor popup auto-scroll issue — when the Elementor popup opens, the page scrolls straight to the bottom of the footer. These issues can be frustrating, but with the right fixes, they’re not that hard to solve. I faced them myself, and these methods worked. Hopefully, they’ll work for you, too.

What Is an Elementor Popup?

What Is the Elementor Popup Auto-Scroll Issue?

Definition: When a popup appears, the page scrolls to the bottom, top, or a random area.

Sometimes, when the popup opens, the page unexpectedly scrolls to the bottom, top, or some random position. This auto-scroll behavior is frustrating, especially when it affects user experience and leads to missed interactions. This article will look into what causes this and how to fix it completely.

The same issue happened when I was reading an article on Elementor’s official website. A popup opened — something like a discount offer from Elementor — and as soon as it opened, the page scrolled straight to the bottom. This has happened to me many times on my website, too. That’s when I started Googling this issue and found some solutions that worked for me. Now, I’m going to share those solutions with you.

Common cases: On-load popups, popups with forms, mobile view, large popups
Why it’s a problem: Bad UX, lost conversions, breaks focus

Common Causes of the Auto-Scroll Behavior and Fixes

1. Input Fields with Autofocus

Why it happens

This is one of the most common reasons behind the Elementor popup auto-scroll issue.

When your popup has a form or any input field — like a name, email, or even a search box — browsers often try to automatically focus on that field as soon as the popup appears. The problem is, when that happens, the page scrolls down to bring that field into view, and that’s where the issue starts.

Inside an Elementor popup, this can break the user experience completely. You open the popup, and suddenly, the whole page jumps down or scrolls in a weird way.

If you’re using Elementor Forms, newsletter capture popups, or even a basic input box, there’s a good chance one of those fields has the autofocus attribute added — either by Elementor or manually.

This is the same issue I’ve seen happen even on Elementor’s official website, so you’re not alone.

How to fix it

Method 1: Remove the autofocus attribute manually

• Open your popup in Elementor.
• Click on the input field (like the name or email field).
• Go to the Advanced tab → scroll down to Custom Attributes.
• If you see: autofocus="true", just delete it.
• Update the popup and test again.

Pro tip: Open your site in Incognito mode while testing. That way, the browser cache won’t mess up your results.

This fix works for most people, including me. As soon as I removed that attribute, the page stopped auto-scrolling when the popup opened.

Method 2: Use JavaScript to prevent scroll but keep focus

If you still want the input field to stay focused when the popup appears, but without scrolling, you can use this small JS snippet. You can add it inside Elementor custom code or WPCode:

document.addEventListener('DOMContentLoaded', function () {
  const popup = document.querySelector('.elementor-popup');
  if (popup) {
    popup.addEventListener('animationend', function () {
      const input = popup.querySelector('input[autofocus]');
      if (input) {
        input.focus({ preventScroll: true });
      }
    });
  }
});

This waits until the popup is fully open, then focuses the input without triggering a scroll. It works well for popups with forms.

Bonus Tip: Check Third-Party Form Plugins

If you’re using a third-party form plugin like WPForms or Fluent Forms, check their settings. Some of them automatically apply autofocus to the first field, and you can usually disable it inside the plugin settings.

2. Accessible Navigation Enabled

Why it happens

This setting is found inside the popup’s Advanced settings in Elementor. When it’s turned on, it tries to make the popup more accessible — especially for people who use the Tab key or arrow keys to move around.

It sounds like a good feature, and it is for accessibility. But here’s the problem: it tells the browser to automatically focus on the first interactive element inside the popup — like a button or input field. When that happens, the browser might scroll the page down to where that element is.

How to fix it

Method 1: Disable Accessible Navigation in Advanced Settings

• Edit your popup in Elementor.
• Click the main popup settings (not the form or text inside).
• Go to the Advanced tab.
• Look for the Accessible Navigation option and set it to No.
• Update the popup and test again — use Incognito mode to make sure you’re seeing the latest version.

This fix worked for me when a client’s popup was scrolling down every time it appeared.

Method 2: Manually manage tabindex (for developers)

If you know what you’re doing or have a developer helping, you can manually set tabindex values on elements. This gives you more control without letting Elementor force the focus and trigger scroll.

Tip: Only keep Accessible Navigation enabled if your popup has a lot of form fields or buttons and you really need keyboard navigation. For most simple popups, turning this off is totally fine — and it solves the scroll issue fast.

3. Heavy Popup with Too Many Elements

Why it happens

By the term “heavy popup,” we mean the popup has so many elements. It has a lot of code inside that builds those elements, and when it loads, the browser may try to render everything at once — which can cause the page to unexpectedly jump. This is more common on mobile devices.

Most of the time, I have faced this exact issue.

How to fix it

• Simplify your popup layout. Remove unnecessary widgets and things that don’t add value.
• Use lazy loading, which we’ll talk about later in this article.
• Also, if you set it to load under 5 seconds after the page loads, it can fix this too — more on that later.

4. Popup Height Larger Than Viewport

Why it happens

If you make your popup too large, like 1000px, and the screen is smaller than that (especially on mobile), the browser tries to show the entire popup. Eventually, it scrolls the whole page. I remember one time it happened to me — I made the popup too large, and the browser scrolled to the bottom. It was irritating.

How to fix it

Method 1: Use vh units + allow inner scroll

• Open your popup inside the Elementor editor.
• Go to popup settings.
• Look for popup height and width.
• Try to keep the popup size under 80vh (viewport height) and 80vw (viewport width) to avoid scroll issues.

Method 2: Reduce padding/margin on mobile layout

• If you’ve added padding on the left, right, bottom, or top — reduce it.

Tip: Check your popup responsiveness at 768px and below.

5. iFrames Inside Popup

Why it happens

If you embed a third-party element like a YouTube video, Google Map, or even a third-party form inside your popup, the browser might shift focus to that embedded content.

When that happens, your page scrolls unexpectedly — usually to the bottom — just to make that embedded content visible.

This happens because iframes (used in videos or maps) can override normal scrolling behavior, especially on mobile devices or slow-loading pages.

It happened to me once when I embedded a YouTube video inside a popup. As soon as I tested it, the page scrolled to the bottom — very annoyingly.

How to fix it

Method 1: Lazy-load iframes with loading=”lazy”

You can’t enable lazy loading directly in Elementor, but you can use an HTML widget inside Elementor to embed the video manually. This way, you can add the loading=”lazy” attribute yourself:

<iframe 
  width="560" 
  height="315" 
  src="Your Video URL" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen 
  loading="lazy">
</iframe>

Replace Your Video URL with your actual video link.

You can also use a plugin to turn on lazy loading. Here is an article for that

Tip: Avoid autoplay or focus-heavy embeds inside popups.

6. Theme or Plugin Conflicts

Why it happens

A heavy theme or too many add-ons can create conflicts. It’s like when you add a widget from a third-party add-on — if that widget isn’t optimized for popups, it can trigger issues like this.

Some themes or plugins with caching features can also conflict with popups that use JavaScript. A poorly coded theme can be another reason.

How to fix it

Method 1: Deactivate plugins one by one

• Deactivate every plugin that affects Elementor and Elementor Pro.
• Test it.
• If the same problem shows up, reactivate all plugins again.
• But if the issue disappears, activate plugins one by one and test each time.

Remember: Use incognito mode every time you test.

Method 2: Switch to a default theme to isolate the issue

• Switch to a theme like Hello Elementor.
• If you see the problem gets resolved, then your theme is causing the issue.
• Try designing your website with the new theme.

Tip: Use a staging site to troubleshoot without affecting your live site.

My Personal Trick (Works Most of the Time)

What is it

This is something I discovered by testing it myself. What I do is — I go to the popup settings and set it to load within 5 seconds after the user lands on the website. But I don’t show the popup automatically. I show it later using a button click.

So basically, the popup loads in the background first, and when someone clicks the button, the popup opens — and no scroll issue.

Why this works (at least for me)

The browser already loads the popup and its content (like forms or videos), so when it’s time to show it, it doesn’t cause any weird scroll or jump. Everything is already stable.

How I do it:

• Edit the popup
• Go to “Triggers”
• Turn on “After X Seconds”
• Set it to 5 seconds
• Then use a button to trigger the popup later

This method helped me every time. You can try it — might work for you too.

Note: This method might slightly increase your page load time because the popup loads earlier in the background. That can reduce your page speed score a little. So, if your client needs a high-performance website and checks everything through PageSpeed or GTmetrix, this may not be the best option.

Bonus Tips (Less Common Cases)

These issues don’t happen often, but it’s still good to know about them:

1. Avoid using # in trigger buttons or links. If you use # in a link (like href="#"), the browser might scroll to the top. It’s better to use javascript:void(0) or Elementor’s built-in popup trigger settings. This doesn’t happen often, but it has happened to me once.
2. Be careful with custom JavaScript or HTML. Some scripts like scrollIntoView() or autofocus inside custom code can cause scroll jumps. If you’re using .focus(), add preventScroll: true to avoid scroll.
3. Mobile browsers can cause layout shifts. On mobile, especially in Chrome or Safari, the address bar hides when scrolling. That can sometimes cause layout shifts or unexpected scroll behavior.
   • Try to keep popups under 80–90vh.
   • Avoid using fixed positioning near the top of the screen.

Best Practices to Prevent Popup Scroll Issues

Here are some of the best practices I personally follow now to avoid this issue from happening again — especially when working with clients:

• Always design responsive popups. Test on different screen sizes and make sure your popup doesn’t overflow the screen.
• Try to keep popup height under 80–90vh on all devices, especially mobile.
• Remove unnecessary animations, heavy media, and widgets that don’t add real value.
• Avoid using too many third-party addons inside popups. They can conflict with Elementor.
• Don’t set autofocus unless it’s really needed. And if you do, use preventScroll: true.
• Always preview your popup in incognito mode after saving — just to be sure everything works cleanly.
• If you’re using iframes (like YouTube), load them manually with lazy loading, and test how they behave.

Trust me, once you start doing these small things, this issue almost never shows up again.

FAQs

Conclusion

Elementor popups are powerful — but sometimes they can act weird, like auto-scrolling when they open. That’s super annoying, especially if you’re showing an offer or form and your users miss it completely.

I faced the same problem. I spent hours testing, tweaking, and reading about it — and that’s how I figured out these working methods. I wrote this guide so you don’t have to waste the same amount of time.

Just follow the steps, apply the fixes, and test on different devices. 90% of the time, these issues are caused by very small settings or forgotten tweaks. Once you fix it, your popup experience becomes smoother — for you and your users.