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.
In some situations you may find your page scrolls to the anchor link but then jumps back to the top of the page before finally scrolling back to the intended position on the page. Here's what to do about it.
Why the Anchor Links scroll back to the top in Divi
An issue that can cause this jump back to the top is when the browser's own handling of anchor link takes effect before Divi's own anchor link handling has loaded.
Normally, Divi will intercept the anchor link and first ensure it is at the top of the page (by trying to scroll there) and before scrolling to the anchor link target element. But if it is too slow to load the browser will carry out the scroll itself. Then when Divi's anchor link handling loads it will scroll back to the top and then back down to the target element – giving the unwanted scroll effect.
You might find that this effect only happens the first time the page is loaded in the browser – after that Divi's anchor scrolling code will be stored in the browser and may load fast enough to avoid the issue.
Fix Divi Anchor Links Jump Back to Top using jQuery
To solve the issue, we can override the scrollTo function so that Divi can't perform its initial scroll back to the top. The following jQuery code can be used to do this:
<script type="text/javascript">
// Preserve existing onreadystatechange listener
var oldReadyStateChange = document.onreadystatechange;
// Attach new listener
document.onreadystatechange = function () {
if (oldReadyStateChange) {
oldReadyStateChange(); // execute old listener function if it exists
}
if (document.readyState === 'complete') {
// Overwrite scrollTo method before Divi calls it
var oldScrollTo = window.scrollTo;
window.scrollTo = function(){ return false; };
setTimeout(function() {
window.scrollTo = oldScrollTo; // restore window.scrollTo
}, 1000);
}
};
</script>Related Post: Adding JavaScript / jQuery to Divi.
You can add this code at:
WP Dashboard > Divi > Theme Options > Integration > Add this code to the head of your blog
If Divi's anchor link code is slow to load the browser will scroll to the link as before, but now when Divi's anchor link handling kicks in it won't scroll back to the top of the page. Instead, Divi will just try to scroll to the correct location. In this case it will either already be there, or will do a minor adjustment to the scroll location (since Divi more correctly calculates the right scroll point by factoring in the size of the header, etc).
I tried your code and followed all the steps but it doesn't work at all. If you go to this page:
https://chadd33.sg-host.com/
and scroll down to the links in the "Comprehensive Real Estate Services" Section (all four of these images links to a target on a separate page) you can see that it still jumps to the target, jumps to the top of the page, and then jumps back down again. Obviously this is not ideal. Can you help?
Hey Cat, sorry the code wasn't working for you. I just checked out the site and it looks like you've added some additional anchor handling code (in your child theme's divi-anchor.js file) that seems to be preventing the jump down / up and back down again issue? Hopefully you've got it working the way you want, but if it still isn't behaving the way you would want, please let me know. Thanks!
Hey Dan,
Thank you for this! This has been puzzling me for ages but your solution worked perfectly on desktop. Can I be cheeky and ask if there's a solution for mobile too? It seems to be loading a little weirdly still.
Here is the site in question (the 4 images under services are the anchor links):
https://auroreproperty.co.uk/
Thank you in advance.
Hey Izzy, I don't currently know of a specific solution for mobiles, but I can see the weird loading on your site. I think it will take a bit of digging to the get to the bottom of it, so I've opened a ticket in my system to look into this further and will let you know if I'm able to figure out what's causing it / how to resolve it. Thanks!
Hi Dan,
Thank you very much for the solution, it helped me a lot, but unfortunately the problem still remain on mobile phones (and it is really annoying). Is there anything else that should be added for this solution to work for mobile phones as well?
Thank you in advance.
You're welcome, Sam. I'm not yet sure what's needed to fix it on mobile for you… are you able to share a link to the site you're working on so that I can see it in action? Thanks!
Where do i put the code snippet?
Hi Matthew,
You can add the code at:
WP Dashboard > Divi > Theme Options > Integration > Add this code to the head of your blog
I hope that helps!
Thanks a lot for the code snippet – it definitely is a 99% improvement compared to the "down and up and down" scrolling divi performs by default.
keep up the great work – even though it is a shame, the elegant themes team has not fixed this issue long ago!
You're very welcome, Marcus! I'm glad it has made an improvement – if you need any help with the last 1%, please feel free to let me know what issue(s) remain. And yes, hopefully Elegant Themes will be able to tackle some of these issues once they've got the Divi 5 release taken care of! Thanks :)
Thanks for this. Is there a way to have the anchors transition smoothly to other sections of a page if the anchors all live on them? Current'y my site reloads the page, albeit it loads at that anchor section.
Hey Lawrence, you can do this by changing your links from the full URL (e.g. "https://aiql.ai/#benefits") to just the "hash" component (e.g. "#benefits"). When you just use the hash part (i.e. the ID of the section), Divi will scroll directly to it, without reloading the page. I hope that helps!