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
Hi dan, do you have any idea what I can change to slow down the scrolling animation when I'm jumping to an anchor? I have searched in custom.js at line var speed = (distance > 4000) ? 1600 : 800; but it looks like nothing is changing.. maybe you can give to me a starting point. Many thanks
Just if someone else is searching for a solution I answered my own question here. Thanks anyway
https://stackoverflow.com/questions/56663735/change-existing-loaded-jquery/56663978#56663978
Okay, great! Thanks for the link to the solution, Vassilis :)
Hey so I just submitted my issue about the anchors not working properly. I've rethought things out since its not working and am making the Visit Us link go to a different page. So if you go to follow up on my complaint, indeed the link problem is still happening but I've had to do a work around.
Hello, I purchased this plugin specifically to fix this issue and it does nothing. I'm super disappointed. IF on this site https://www.fraservalleycider.ca/finecider/ if you click Visit our Cidery, it goes to the correct anchor spot, but if you go to another page(eg https://www.fraservalleycider.ca/finecider/contact-us/) and then click back to the link to Visit our cidery, it again goes into the middle of the section anchor. https://www.fraservalleycider.ca/finecider/#visit Any thoughts? This is a dev site and I'm seriously considering just ditching the whole thing because the Divi theme is so clunky. I was hoping your plugin would help but this doesn't seem to be the case.
Oh so I ended up building an actual page, because I couldnt resolve the anchor problem sadly.
Hi Teresa, I'm glad you were able to workaround the issue, though I'm sorry you had to. Thanks for sharing the links. I took a look at the page. It looks to me like the browser is scrolling to the correct location very briefly, and doing so at the right time – i.e. when the browser reports the page as fully loaded. I think the issue you're seeing may stem from the use of WP Rocket's lazy load feature which delays the loading of images, etc, until they are scrolled into view. I think that as the page is scrolling towards the anchor, the lazy load feature is kicking off and loading images. As these images load, the page starts changing size to accommodate them and this quickly pushes the content away from the original anchor point location that is being scrolled to. I may be wrong on this and will do more investigation on my end / try to solve it. If you do get a chance, I'd be really interested to know if temporarily disabling WP Rocket corrects the issue or not. Thanks!
Great observation and just wanted to confirm your suspicions. I turned off WP Rocket's lazy loading feature and this issue went away.
Hey Kyle, thanks for the confirmation – I'm glad we've got to the bottom of it. I guess a manual workaround would be to explicitly set the size of the images or their containers, so that the browser can reserve the right amount of space for them when the page is first rendered. That might be practical on a single page or two, but if I get a chance I'll try to come up with an automated solution. Thanks again!
thanks dan!
im using this code in version 3.19.13
works great
Great! Thanks for the feedback :)
Hey i tried your fix but unfortunatly i am still getting the same problem. Every time i am going from another site to the anchor it just too far but if i am on the site and im using the anchor it works perfectly.. do you have any ideas?
Hey Lukas, is there any chance you're able to send me a link to the page you're working on, so that I can take a look? Also, can you let me know which browser / OS you're using? Thanks!
Awesome fix – so grateful!
My only regret about purchasing Divi Booster is waiting so long to buy it!!!! I didn't even know this was an option in Divi Booster(which I already have) and searching how to fix the problem found this. I LOVE THIS PLUGIN!!!
Regarding the "not on mobile" issue, I had target sections that appeared on desktop but not mobile, and vice versa. I had to give the target mobile section a different Class ID than that for the target desktop section. And then, where I was linking from, I had to create a mobile and desktop version with links to the respective target Class IDs.
Thanks for this plugin. Really saves some time!
Hey Cliff, I'm glad you found something that worked, and thanks for sharing your solution! Cheers!
Hey guys! Love, love love Divi booster. A godsend and a timesaver. I have a minor issue regarding anchor link navigation. I needed to create a separate section for mobile, and the navigation link doesn't want to navigate down to this section on mobile. Has anyone else run into this, and if so how have you resolved it?
Hey Nick, I just released an update to Divi Booster that fixes an issue some people were having with the anchor link feature. Perhaps you can give that a go and see if that helps? If not, is there any chance you can give me an example of the anchor link you're using / point me to the location of the mobile section in question? Thanks!
I use divi booster. When I ran https://criticalcss.com/debug-css on my divi site with divi booster enabled I got a bunch off css errors that I eventually traced to your plugin. I like the functionality of your plugin. (I turned it off)
Can you clean it up and fix it the css errors in your plugin so I can use it?
I was just wondering if you'd be able to provide me with a copy of the criticalcss.com report for your site so that I can see exactly what errors you were getting? If so, you can attach it in reply to this email.
Hi Mark, I've just sent you an email. If possible, would you be able to reply to it with a copy of the CSS report so that I can see exactly what was raised.
I did some tests with the free CSS validator tools and it picked up one actual CSS error, which I've fixed for the next release (2.6.1). They also identified a bunch of warnings. However, many of these warnings are things that (arguably) make sense in an idealized scenario where you have full control over the HTML / CSS, such as not using IDs and avoiding the use of !important. But these things can make sense (and often be impractical to avoid) when you're attempting to modify an existing WP theme such as Divi which uses IDs and applies its own CSS which must be overridden.
Anyway, if you are able to send me a copy of the report, I'll do my best to address the points it raises. Thanks!
I am having an issue where on mobile the anchors are not working at all for my images – any idea why this might be? They work fine on desktop.
Hi Sarah, the only time I've seen this happen in the past was due to Safari losing the anchor on redirects, as discussed here:
https://stackoverflow.com/questions/22643032/anchor-tag-doesnt-work-in-iphone-safari
I'm not sure if it's still the case with Safari, but if so you might want to check your link isn't redirecting and link directly to the final URL if so. For example, if you're linking to the http version of the URL, but the page redirects to https, try linking directly to the https version.
If that's not the problem, is there any chance you can send me an example of one of the links that isn't working so that I can check it out. Thanks!
I'm having a strange issue regarding divi anchor links – it's on a live site so i had to use a different not so good temp solution, but here's the prob:
Full Screen Slider with 2 buttons.
Both buttons are divi anchor links
they both work on desktop
the 1st works fine on mobile
the 2nd button does not work at all on mobile – it does not slide down on the page anywhere.
any ideas?
Hey Gabriel, is there any chance you're able to set up an example page for me demonstrating the issue? If you don't want the example page to be publicly visible at all, perhaps you could mark it as private and then send me login details via the contact form (link in the header of my site) so that I can view it. Thanks!
Hi Dan,
The bugfix you mention is not fit for purpose. Your solution was graceful and links to the correct part of the page. Relying on Divi provides a poor and jerky landing and actually doesn't anchor to the correct place.
Can you reinstate the function please. Although ticked in Divi Booster … it is not working … so I can only assume you've actually removed the functionality if still ticked.
Please advise
Many Thanks
Regards Mark
Yeah, it looks like you are right, Mark, the Divi fix added in 2.7.6 didn't fully resolve the issue (as I had initially thought). I've reinstated the Divi Booster solution in the latest version (2.5.0). Thanks!