If you’ve encountered a strange issue with Elementor’s anchor links and scrolling behavior, you’re not alone. After updating Elementor to version 3.26.3, a common feature that worked in previous versions — the ability to adjust the scroll distance when clicking anchor links — suddenly stopped functioning. Let’s dive into the issue, explore the bug, and discuss a new way to achieve the desired behavior using CSS.

Prerequisites

Before we get started, here are a few things to note:

1. Previous Troubleshooting Attempts: I’ve searched both open and closed support tickets in Elementor’s repository but couldn’t find any ticket that matched this issue.
2. Version Check: This problem persisted even after troubleshooting, and it’s occurring in the latest stable version of Elementor.
3. Testing the Issue: I’ve confirmed the issue by testing with the latest stable version (3.26.3), which no longer supports the scroll distance adjustment.

Description of the Issue

In earlier versions of Elementor, I used the following jQuery code to modify the scroll distance when clicking anchor links:

jQuery( window ).on( 'elementor/frontend/init', function() {
    elementorFrontend.hooks.addFilter('frontend/handlers/menu_anchor/scroll_top_distance', function(scrollTop) {
        return scrollTop - 67;
    });
});

This code worked fine in Elementor 3.22.2 but stopped functioning after updating to Elementor 3.26.3.

Upon closer inspection, it seems there have been some changes in how Elementor handles links and scrolling behavior. In the older versions, clicking an anchor link like #price would not add the hash (#price) to the browser’s address bar. However, with the new version, clicking anchor links does update the browser address bar with the hash.

I also tested the new code shared by Elementor here: https://developers.elementor.com/docs/hooks/js/#frontend-handlers-menu-anchor-scroll-top-distance but the issue persisted.

Steps to Reproduce the Issue

1. Create sections on your page and assign them IDs like #about, #features, and #price.
2. Create a WordPress menu with anchor links matching those IDs.
3. Add this menu to a page using the WordPress Navigation Menu widget.
4. Save the page and view it. The navigation menu should work as expected in its default mode.
5. Try the following code to adjust the scroll distance (from Elementor’s documentation):

Expected Behavior: The frontend/handlers/menu_anchor/scroll_top_distance filter should adjust the scroll distance when clicking anchor links. However, it no longer works.

Isolating the Problem

Here’s what I discovered while isolating the issue:

• This bug only occurs when Elementor and Elementor Pro plugins are active.
• The issue is also present when using the Hello Elementor theme.
• The bug can be consistently reproduced by following the steps mentioned earlier.

Root Cause and Solution

Upon further investigation, I found that Elementor now utilizes smooth scroll from CSS instead of JavaScript. This change likely caused the JS-based scroll_top_distance hook to stop working.

New Approach: CSS Solution

Since Elementor now uses CSS for smooth scrolling, you don’t need the JS hook to adjust scroll offset anymore. Instead, you can achieve the same effect with the following CSS:

:target {
    scroll-margin-top: 100px;
}

This CSS rule adjusts the scroll position when targeting an anchor link, ensuring that there is an offset when the user is brought to the section. It works well with the smooth scroll feature now in place and provides an easy, efficient way to set the desired scroll distance.

Conclusion

If you’re encountering the same issue with Elementor after the 3.26.3 update, the problem likely stems from a change in how Elementor handles scrolling, now relying on CSS instead of JavaScript. The scroll_top_distance filter no longer works, but the good news is you can achieve the desired scroll behavior using the CSS scroll-margin-top property.