Fix Divi Anchor Links Stopping at Wrong Place

The Divi Theme has a nice feature whereby you can use CSS IDs as anchor links. If you give one of your Divi Builder components (a section, module, etc) a CSS ID of, say, "jumptohere", then you can create a link of the form https://www.mysite.com/mypage/#jumptohere and when clicked it will take your user straight to the part of the page with that component.

Unfortunately Divi doesn't always scroll to the right place. Sometimes it will scroll a bit past the top of the target section. Here's what to do about it.

Fixing the Anchor Link Scrolling with Divi Booster

Divi Booster has had a feature to address the issue since version 2.1.8. It operates in a somewhat similar way to the option (mentioned later in this post) that was available in earlier versions of Divi and is now implemented in Divi by default. However, I've had some reports where the Divi Booster feature has worked where the built-in Divi option hasn't, so you may find it works for you.

You'll find the option at:

Divi > Divi Booster > Site-wide Settings > Links > Fix Divi anchor link scrolling

Fixing the Anchor Link Scrolling with JavaScript

If you don't have Divi Booster, here is the JavaScript code it uses to implement the anchor link scrolling fix:

<script>
document.addEventListener('DOMContentLoaded', function(event){ 
    if (window.location.hash) {
        // Start at top of page
        window.scrollTo(0, 0);
		
        // Prevent default scroll to anchor by hiding the target element
        var db_hash_elem = document.getElementById(window.location.hash.substring(1));
        window.db_location_hash_style = db_hash_elem.style.display;
        db_hash_elem.style.display = 'none';
		
        // After a short delay, display the element and scroll to it
        jQuery(function($){
            setTimeout(function(){
                $(window.location.hash).css('display', window.db_location_hash_style);
                et_pb_smooth_scroll($(window.location.hash), false, 800);
            }, 700);
        });		
    }
});
</script>

[Deprecated] Fixing the Anchor Link Scrolling in the Divi Theme Options

Update: The Divi 4.6.5 update removed this alternative scroll-to-anchor option from Divi Theme Options and made it the default behavior, so this section can be ignored unless you are on an older version of Divi. – Thanks to Randy for pointing this out.

Divi itself recognizes the problem and now has a setting which attempts to solve it. The setting is disabled by default, but you can enable it at:

Divi > Theme Options > Navigation > General Settings > Alternative scroll-to-anchor method

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

90 Comments

  1. I have found here:
    https://divi.help/threads/scroll-effect-problem.8999/

    something that works for me:
    "You may try the below code in your child theme functions.php & see if it works:
    Code:
    add_filter( 'wp_lazy_loading_enabled', '__return_false' );"

    I have used the Code Snippets, not child theme

    Reply
    • Hey Rebelscumsky, thanks for sharing. It makes sense as lazy loaded images only start loading once they are scrolled into view and take some time to load, so an anchor scrolling past them could trigger them to load and then shortly after they will be added to the page, changing the page length and throwing off the anchors. Much appreciated!

      Reply
    • Disabling lazy loading worked for me too! Can't tell you how long I spent trying to solve this issue so a big thank you :)

      How this will effect performance etc. I do not know yet. I might see if its possible to just disable lazy loading for the specific page I had the issue with.

      Reply
      • Yeah, thanks again Rebelscumsky. Steve, I haven't tested it, but I imagine you'd be able to do something like this:

        function disable_lazy_load_for_specific_page( $enabled ) {
            if ( is_page( 123 ) ) { // Replace 123 with your specific page ID
                return false;
            }
            return $enabled;
        }
        
        add_filter( 'wp_lazy_loading_enabled', 'disable_lazy_load_for_specific_page' );
        

        If it's a post rather than a page, then use is_single(123) instead of is_page(). Anyway, if you have any trouble getting it working, let me know and I'll set up a proper test. Thanks!

        Reply
        • Thanks Dan. That works perfect! For anyone else reading this my specific issue was anchor links not going to their correct place for a long web page, but only on mobile devices – worked fine on desktop. Disabling lazy loading for the specific page fixes the issue.

          Reply
          • You're welcome, Steve. I'm glad that helped and thanks for the clarifying the original issue. Cheers!

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.