How to Add a Back to Top Button Using Elementor

A Back to Top button is a floating element that stays visible in a corner of the screen as a visitor scrolls down. When clicked, it scrolls the page back to the top. It is usually hidden until the visitor has scrolled a certain distance, typically 300 pixels or more, and then fades into view.

The key word here is floating: it sits on top of the page content rather than being embedded in the layout. This is what makes it practical on long pages. The button follows the reader down the page and is always one click away, without disrupting the reading experience or requiring the visitor to scroll back up manually.

Long-scroll pages lose visitors when there is no easy way to get back to the navigation. Most people will not scroll back to the top manually if the page is several screens tall. A Back to Top button removes that friction.

From a practical standpoint, it is most useful on:

• Blog posts over 800 words
• Long-form landing pages with multiple sections
• FAQ pages or resource lists
• Any page with a sticky navigation that links to sections below the fold

If your pages are short (under two scrolls), a Back to Top button adds clutter without benefit. For everything else, it is a simple addition that most visitors appreciate without necessarily noticing it.

Method 1: Elementor Pro’s built-in Scroll to Top feature

Elementor Pro includes a native Back to Top option through its Site Settings. Here is how to set it up:

1. Open the page in Elementor Pro.
2. Click the hamburger menu (three lines) in the top-left corner of the Elementor panel and select Site Settings.
3. Look for Back to Top in the Site Settings panel. Toggle it on.
4. Choose the icon style, position (right or left), and the scroll distance before it appears.
5. Click Save Changes.

This applies the Back to Top button site-wide, not just on one page. It is the cleanest approach if you are on Elementor Pro because it requires no plugins and the button matches your site style settings automatically.

Method 2: Free plugin (Essential Addons for Elementor)

If you are using Elementor free without Pro, the easiest way to add a floating Back to Top button is through Essential Addons for Elementor, which has a free tier and is the most widely used Elementor addon plugin.

1. Install Essential Addons for Elementor from the WordPress plugin directory and activate it.
2. In your WordPress dashboard, go to Essential Addons > Elements and make sure Scroll to Top is enabled.
3. Open any page in Elementor. Search for Scroll to Top in the widget panel (left sidebar).
4. Drag the widget anywhere onto the page. The widget is fixed-position, so its placement on the canvas does not affect where it appears on screen.
5. In the widget settings, configure the icon, colors, size, and the scroll distance that triggers the button to appear.
6. Click Update to save.

The button will appear on that specific page. If you want it site-wide, add it via Elementor Theme Builder on your global page template.

Method 3: Manual anchor link (no plugin, free version)

This method creates a text or button link anywhere on the page that jumps back to the top when clicked. It is not a floating sticky button, but it is useful if you want a specific “Back to Top” link placed at the end of a long section.

1. Click the handle of the first section at the top of your page to open its settings.
2. Go to the Advanced tab in the section settings.
3. In the CSS ID field, type a simple ID like top (no # symbol, no spaces).
4. Scroll to wherever you want to place the “Back to Top” link on the page.
5. Add a Button widget or Text Editor widget. Set the link URL to #top.
6. Label the button “Back to Top” and style it as needed.

Clicking that button will scroll the visitor back to the section with the matching CSS ID. This approach works with Elementor free and requires no additional plugins, though the button is not floating. It only appears where you placed it on the page.