Fix Divi Anchor Links not Working Correctly

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

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 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.

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

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 available in Divi (mentioned above). 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>

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

72 Comments

  1. For some reason I don't have the built-in Divi option, but clicking over to your article about how to add the javascript you provided here, I was able to insert that and it works great. Thanks!

    Reply
    • Hey David, it looks like Divi removed this option in the 4.6.5 update and made it the default behavior. I've now noted this in the post above. I'm glad the JavaScript fix worked for you! Thanks!

      Reply
  2. A golden idea. Sell โ€‹โ€‹an incomplete product where some important functions is damaged and then try to sell another product which can fix half of bugs. Great you are my boss ๐Ÿ˜€

    Reply
    • Hey Shogun, thanks for the comment. Just to clarify – the Divi theme isn't my product. It's by another company, Elegant Themes. So I'm not making money fixing my own bugs unfortunately ๐Ÿ˜‰

      Reply
  3. Huge thank you. I've been spinning my wheels on why this custom menu wasn't working… ugh! (https://www.dev3lop.com/testing2) For real, ive had this page built for ever and just haven't taken the time to google and boom, you're on top of it!

    Thanks so much for offering the divi solution vs pitching your products immediately, i can really appreciate that type of writing style. Big thanks from my business to your business.

    Finally going to buff my portfolio page, big ups to your team! All my anchor links are working now. Cheers.

    Reply
    • You're very welcome, Tyler! I try to focus on helping solve the issue at hand as quickly and easily as possible, so if there's a potential solution built into Divi it makes sense that I present that (and you try it) first ๐Ÿ™‚ Cheers!

      Reply
  4. Didnt work for me. My problem is on mobile. On desktop the anchors are correct. On mobile, the fixed header covers the top of the section.

    Reply
    • Hi Gui, I think the issue here is that the code in this post is designed to work with the default Divi header, but your site is using a custom header built in the Theme Builder. I don't yet have a version of this code that supports custom Theme Builder headers, but if I'm able to come up with one I'll let you know. Cheers!

      Reply
      • Dan, looking forward to a version compatible with the Theme Builder's header if possible. ๐Ÿ™‚

        Reply
        • Me too! I'll keep you posted ๐Ÿ™‚

          Reply
  5. Thank you. That worked!! ๐Ÿ™‚

    Reply
    • Youโ€™re welcome, Lisa ๐Ÿ™‚

      Reply
  6. Your plugin has made my life a lot simpler, thanks……your post has helped resolve a problem I ran up against last night, my son in law said take a break, I did, and this morning I googled the issue and came up with your post…a happy ending.

    Reply
    • You're very welcome, Tom. I'm glad it helped solve the problem ๐Ÿ™‚

      Reply
  7. Dan,

    Thanks for both fixes. I used your code on one site a few weeks ago and then the Divi Options route on another site today (thanks Jim).

    So far so good!

    Reply
    • Great! Thanks for the feedback, Scaramouche. And yes, thanks again, Jim.

      Reply
  8. I know that post a couple of months old but I think that this will take care of the problem: Go to Theme option > Navigation > General Setting > Enable the Alternative Scroll.

    Reply
    • Hey Jim, thanks for that. I've updated the post with details of the setting. As I mention, I've seen cases where the code given in this post has worked, where the Divi setting hasn't. But I've also seen cases where the Divi setting has worked, so it seems to vary depending on the site set up. I want to look at this in more detail as there seems to be yet more cases where neither of the above is sufficient… Thanks again!

      Reply
  9. Amazing!
    Exactly what I needed!

    Reply

Submit a Comment

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