Can You Make an Elementor Button Scroll to a Section in Hostinger?

1. What Is a Scroll Button?

A scroll button (or anchor button) is a navigation element on a webpage that, when clicked, automatically scrolls the viewport down to a specific section of the same page rather than loading a completely new page.

This is highly useful on long landing pages, sales letters, or single-page portfolios where you want to guide users directly to pricing tables, signup forms, or product specifications instantly. By implementing smooth scrolling, you create a seamless and professional user experience that increases overall conversion rates.

2. Anchor Links Explained

At the core of scroll buttons are HTML anchor links. In HTML, elements can be assigned a unique identifier using the id attribute (e.g., id="pricing").

When a link contains a hash symbol followed by that identifier (e.g., #pricing) in its reference field (href), the browser intercepts the request and targets that element, shifting the scroll offset of the window to match the vertical location of the target container.

3. Creating a Scroll Button in Elementor

Creating an anchor scroll button in Elementor is extremely straightforward. Here is the standard hPanel WordPress editor workflow:

1. Log into your WordPress dashboard and open the page you want to edit with Elementor.
2. Drag a Button widget from the Elementor sidebar and drop it into your section.
3. In the button settings panel on the left, locate the Link field.
4. Input a hashtag followed by your custom CSS ID (e.g., #pricing-table). Do not include spaces or special characters.
5. Click Update to save.

4. Adding CSS Anchor IDs

Once the button has been configured with the hash link, you must set the target section to match that ID.

1. Scroll down to the target section or container you want the button to scroll to.
2. Click the Edit Section (six dots) or Edit Container handle at the top of that element.
3. In the left settings panel, navigate to the Advanced tab.
4. Locate the CSS ID field (third option from the top).
5. Enter your custom ID matching the hash link without the hashtag symbol (e.g., input pricing-table, not #pricing-table).
6. Click Update. The connection is now complete.

5. Enabling Smooth Scrolling

If your website jumps instantly to the section rather than sliding down smoothly, you must enable smooth scrolling.

Most modern themes enable smooth scrolling by default. If yours does not, you can force it globally by adding this simple CSS rule to your WordPress Customizer (Appearance -> Customize -> Additional CSS):

6. Mobile Optimization & Offsets

Sticky headers can cover the top of target sections on mobile viewports. If you experience this issue, you must adjust the scrolling offset.

You can achieve this by adding top padding directly to the target section in Elementor. For example, add 90px of top padding to the container, and offset it with a negative top margin (e.g. -90px) to keep the design identical while shifting the scroll anchor upward.

7. Troubleshooting Scrolling Errors

8. Common Elementor & Hostinger Issues

Hostinger servers use optimized LiteSpeed caching nodes. If you update your Elementor anchor links and they fail to show on the front end, click the Purge All button inside the LiteSpeed Cache plugin settings bar at the top of your WordPress admin panel. This clears the compiled JS/CSS arrays and compiles the new anchor layouts.