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