Elementor is a popular visual drag-and-drop page builder plugin for WordPress and one of the leading web development tools for WordPress websites. With an active installation of 5+ million, Elementor helps WordPress web designers build pixel-perfect, professional websites at scale.
The core plugin is free, whereas the pro version provides added features that help web developers create an immersive web experience. Since Elementor is used extensively, it has a vast community that helps detect and fix vulnerabilities & issues. One such common issue is Elementor’s scroll-to-anchor issue on mobile.
Read: Best Elementor Templates For WordPress
What Is An Anchor In Elementor?
Also known as the jump menu, the anchor menu in Elementor helps users navigate within a page or post. Elementor anchor can be likened to the ‘table of contents’ used for this blog. Since the blog has several sections, an anchor for each section makes navigation easier.
For instance, in this blog post, a user can directly skip to the ‘Fixes For Elementor Scroll-To-Anchor Issue On Mobile’ section by clicking the link.
This ‘anchor link’ feature makes it easy for website visitors to quickly find the information they are looking for, which helps improve user experience. Plus, it can help increase dwell time, which is one of the ranking factors.
In Elementor, the menu anchor widget can help you add an anchor to your page or post. Just add a unique name or ID to the anchor and link it via a text, button, or menu item.
Related: How To Fix Widget Panel Not Loading In Elementor
Advantages Of Using An Elementor Anchor
Improved website accessibility is one of the top advantages of using an Elementor anchor. Besides this, other advantages of the Elementor anchor are:
Improve User Experience
As mentioned earlier, anchor links make it easy to find relevant information quickly. If a particular post or page on a website is lengthy, the anchor feature makes it simpler for users to navigate through it. They can jump to the top or the bottom of the page/post at a click-of-a-link, which helps enhance the user experience on mobile.
Efficient Website Browsing
Likewise, rather than endless scrolling, with the anchor link feature, users can directly skip to the page/post sections they want. This makes website browsing more efficient on mobile, helping users save time which they’ll appreciate.
Quick Navigation
Poor navigation is one of the main reasons for a high bounce rate on mobile. By using the Elementor anchor link feature, website owners can increase dwell time and page views, which will help reduce the bounce rate. A lower bounce rate, in turn, can help boost your site’s ranking on the SERPs.
Enhanced SEO
Improved user experience, increased dwell time and pageviews, lower bounce rate, and higher ranking are some of the advantages of using anchor links. All of these advantages will directly contribute to enhancing your site’s SEO.
Reasons For Elementor Scroll-To-Anchor Issue On Mobile
Before we look at how to fix the Elementor scroll-to-anchor issue on mobile, let’s check out the primary reasons for this issue. By determining the reason, you can quickly implement the right fix to resolve this problem.
Elementor Settings
Before you browse through the reasons for the scroll-to-anchor feature not working on mobile, start by checking the settings in Elementor. It could be that the ‘scroll-to-anchor’ feature is disabled or not properly configured. If this is the case, you can rectify the error by enabling the feature and configuring it again.
Theme Or Plugin Conflict
In most cases, if a theme or plugin is not compatible with Elementor, it could cause the issue of scroll-to-anchor not working on mobile. Incompatibility could interfere with the smooth functioning of this feature. Too many WordPress plugins could also lead to this issue.
Related: Best Elementor Landing Page Templates or Themes
Lack Of Targets
Anchor links have a target attribute that specifies ‘an action’ once the link is clicked. If the target or anchor text is not specified or is missing/blank, it could lead to the scroll-to-anchor issue on mobile.
JavaScript, HTML, Or Cache Issues
Incompatibility or restrictions of JavaScript on mobile devices could be a reason for the Elementor scroll-to-anchor feature not working on mobile. Caching is another issue that could prevent anchor links from functioning optimally. Lastly, if there is a configuration issue with the HTML structure of a page or post, it could hamper the functionality of the anchor links.
Poor Server Health
If you are using cheap web hosting that doesn’t have a proper server infrastructure, it could cause the issue of scroll-to-anchor not working on mobile. Optimal server health is critical for plugins to work seamlessly on a WordPress website. Lack of the same could result in plugin conflict, and in this case, may impact the anchor link functionality on mobile.
Read: QI Addons For Elementor – Plugin Review
Quick Fixes For Elementor Scroll-To-Anchor Issue On Mobile
Once you know the reason for the scroll-to-anchor issue on mobile, you can use the below quick fixes to rectify it. These are straightforward fixes that don’t require technical expertise. However, if you need professional help to implement them, get in touch with a WordPress expert.
Choose A Default WordPress Theme
The simplest way to fix the scroll-to-anchor issue on mobile is to revert to a default WordPress theme. If this solution works, you know that the reason was the theme’s incompatibility with the Elementor plugin. Before you revert to the default theme, take a website backup.
Read: Best WordPress Backup Plugins
Create Targets
If the post or page does not have a target link, the scroll-to-anchor feature would not function properly on mobile devices. To fix this, create target links and highlight them. Here’s how:
- Set up the theme and type the following code
.menu-item a{
Color: black;
}- Next, you need the below code to highlight the target link
.menu-itema.mPS2id-highlight{
color: blue;
}Use A JavaScript Filter
You can also add a JavaScript filter to the Elementor menu anchor widget. Here’s the code to add the required JavaScript filter.
add_action( 'wp_footer', function() {
if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
return;
}
?>
<script>
jQuery( function( $ ) {
$( window ).on( 'elementor/frontend/init', function() {
elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) {
var isMobile = $(window).width() <= 760;
if (isMobile) {
return scrollTop - 1000;
} else {
return scrollTop;
}
} );
} );
} );
</script>
<?php
} );
Adjust Scrolling
Another easy way to fix the Elementor scroll-to-anchor issue on mobile is to adjust the scrolling offset when the menu is in mobile mode. You could use a Javascript filter to adjust the scrolling value.
Related: Fix Elementor Animated Headline Not Working
Best Anchor And Scroll Plugins For WordPress
If none of the above fixes resolve the Elementor scroll-to-anchor issue on mobile, consider using another plugin specifically for this feature. Below are a few anchor and scroll plugins for WordPress or anchor links/jump links plugins. These provide a host of features that can help enhance user experience.
WordPress Infinite Scroll – Ajax Load More
This is a lightweight plugin with over 50k active installations. It lets you add the scroll-to-anchor feature to a single post, page, lazy loading pages, comments, and more. It also allows you to create custom shortcodes for infinite scrolling. Ajax Load More plugin is compatible with WooCommerce and Easy Digital Downloads. Plus, it is multisite compatible and allows you to customize the plugin settings.
Pricing: The core version is available for free. The pricing for the premium version starts at $149 for a single website.
Page Scroll To ID
This plugin allows you to add smooth scrolling animation to anchor links. It provides advanced functionality such as adjustable scrolling animation for single-page websites, back-to-top links, and in-page navigation. It also allows you to highlight the targeted link and text via ready-to-use CSS classes. Other features include offset scrolling, and link-specific offset, among others.
Pricing: The Page Scroll to Id plugin is free and compatible with WordPress version 3.3 or higher.
Ultimate Blocks – Gutenberg Blocks Plugin
The ultimate blocks plugin provides a variety of features to improve user experience. From anchor links and scroll perspective, it generates a ‘table of contents’ from the headings. It allows you to activate or disable the ‘smooth scrolling’ feature. Moreover, you can adjust the scroll offset for mobile and split the table of contents into columns.
Pricing: Available for free!
WPFront Scroll Top
This is another excellent anchor to scroll WordPress plugin with 200,000+ active installations. It offers a range of customization, such as display buttons for when a user scrolls down a page or animation for back-to-top buttons. WPFront Scroll Top is a simple-to-use plugin that allows you to create text, images, and font-awesome buttons. Furthermore, with this plugin, you can link to an element within the page or link to different pages using URLs.
Pricing: You can download this plugin for free.
Catch Infinite Scroll
As the name suggests, this plugin allows you to add infinite scroll to the page and post. It is a lightweight plugin that helps users load & scroll content automatically at a faster rate. It also offers the option between clicking and scrolling to load content, and you can add a custom image. The Catch infinite scroll plugin is compatible with WordPress version 5.7 or higher and has 20k active installations.
Pricing: Available for free on WordPress.org. Whereas, the Catch Infinite Scroll PRO is priced at $24.99 for a 1-year license.
Read: Elementor Stuck On Loading Screen? Here’s How To Fix It
Conclusion
Fixing website errors should be a top priority if you want to enjoy a good ranking on the search result. Issues such as the Elementor scroll-to-anchor not working on mobile can affect user experience and lead to a high bounce rate. As such, fixing this issue immediately is important for a hassle-free browsing experience.
Elementor scroll-to-anchor not working on mobile can be rectified once you know the reason for it. Before browsing through the list of reasons, check if the scroll-to-anchor feature is enabled in Elementor. Next, check for caching issues and blank targets.
If none of these are causing the scroll-to-anchor issue on mobile, check for advanced issues like JavaScript and HTML issues, poor server health, and theme & plugin conflict. Once you identify the cause or issue, you can implement the fixes mentioned here.
