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

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 =; = 'none';
        // After a short delay, display the element and scroll to it
                $(window.location.hash).css('display', window.db_location_hash_style);
                et_pb_smooth_scroll($(window.location.hash), false, 800);
            }, 700);

[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


  1. I have tried both the plugin and the script option, and my anchor links will scroll the page twice.

    Any ideas?

    • Hey Evan, sorry you've been having trouble with this. Is there any chance you'd be able temporarily disable the option in the plugin (and remove the script if you haven't already), and let me take a look at how the site behaves without the fix in place? If also you're able to point me to (an example of) a particular place on the site where the anchor link isn't working as you'd expect, that would be very useful. Thanks!

  2. This issue has me pulling my hair out! I've successfully used css anchors on Divi pages for a while, but recently I had to add a tab module to the page and that seems to break the anchors on mobile devices – still works fine on desktop. Its the same issue if you add a Toggle or Accordion module – even if they are empty! Anyone come accross this?

    • Hey Steve, I haven't personally come across this before. Are you able to share a link to an example page showing the issue? I've been playing around on my test site, but haven't been able to recreate the issue – the links keep working when I add those modules… Cheers!

    • "Something" has changed lately. The fix I got from Elegant Themes is that you can't have the same anchor on 2 modules on the same page, with one module formatted for desktop and the hidden one for tablet/mobile. It has always worked for me in the past, and still does on some modules. The CSS ID is the fix –
      desktop: reliability
      tablet/mobile: reliability_mobile

      • Hey Shannon, Elegant Themes are right and it doesn't just apply to modules. Technically the HTML specification requires that IDs are unique in the page – that is, no two tags have the same ID. Both the browser and the anchor are potentially assuming that and will probably just try to scroll to the first instance, if it's visible. In the case of the ID being reused, it the behavior may be a bit unpredictable – it may sometimes be trying (and failing) to scroll to the hidden ID. So probably the order / location of the hidden / not hidden IDs will have an impact, if that makes any sense?! Anyway, I'm glad you've been able to fix it by changing the IDs. Thanks!

  3. It seems that after recent Divi updates they have managed to screw this feature up again. I’ve been working with support and they give me a script to try and customize the header height for every site I have. This is ridiculous and doesn’t work b/c depending on the device it will appear differently based on screen size.

    Do you have an update to help fix it?

    • Hey Matt, it seems like it should be possible to calculate the header height dynamically when the page loads (rather than having to customize the header height) and add this as an offset to the scroll position. I haven't had a chance to check out what changes Divi have made, or how to achieve this, but I'll update here if / when I'm able to figure anything useful out. Cheers!

      • How is it possible to dynamically calculate the height? I would love this fix!

        • Hey Samantha, I haven't been able to figure this out yet, but will update here when I do. In the meantime, one thing I've found to be useful in getting the anchor linking to scroll to the right point is manipulating the padding / margin of the elements. The anchor link typically scroll to the top of the target element's padding. This means increasing the top padding will make the element's content appear lower down the page, while decreasing it will place the content closer to the top of the screen (after scrolling). I've found it's sometimes possible to adjust the top padding to get the right scroll point, and compensate visually for the extra top padding by making a corresponding decrease in the previous element's bottom padding / margin.

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

    • 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!

  5. 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 :D

    • 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 ;)

  6. Huge thank you. I've been spinning my wheels on why this custom menu wasn't working… ugh! ( 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.

    • 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!

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

    • 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!

      • Dan, looking forward to a version compatible with the Theme Builder's header if possible. :)

        • Me too! I'll keep you posted :)

        • Me too. That’s what I need because all new templates and sites are using this. Especially since Divi’s default header is lame. That theme builder has hurt more than its helped

          • Yeah, there needs to be some special treatment for fixed headers since they essentially exist outside the part of the page used for calculating scrolls and such. As I mention in my other comment, this would probably have to take the form of a dynamic calculation of the header height that then gets added to the scroll position. Again, I'll update here if I'm able to come up with a solution. Thanks!

  8. Thank you. That worked!! :)

    • You’re welcome, Lisa :)

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

    • You're very welcome, Tom. I'm glad it helped solve the problem :)

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

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

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

    • 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!

  12. Amazing!
    Exactly what I needed!


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