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>Related Post: Adding JavaScript / jQuery to Divi.
[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
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!
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!
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.
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!
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 ;)
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.
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!
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!
Thank you. That worked!! :)
You’re welcome, Lisa :)
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 :)
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.
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!
Works 100% Thanks a mil
Amazing!
Exactly what I needed!