Fix Divi Anchor Links Jump Back to Top

|

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>

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

This post may contain referral links which may earn a commission for this site

Divi Booster

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

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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