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

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:

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

60 Comments

  1. 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
  2. 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
  3. 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
  4. Amazing!
    Exactly what I needed!

    Reply

Submit a Comment

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