When anchor tags go wrong (in Divi in this case)

Anchor Tags

Anchor tags are useful bits of html. We use anchor tags to jump to a specific place on the page we’re on or on another page. A link can jump to any bit of content with an id assigned but we most commonly use div, p, a or span elements as the targets of our anchor tag links.

This link goes to an anchor further down the page. Note that the title of that section of this article is lost under the menu. That’s the problem with anchor tags in WordPress.

Consider this element somewhere on the page:

<div id="landing">
<h1>Heading for this section</h1>
<p>Paragraph in this section</p>
</div>

and a link elsewhere on the page like this:

<a href="#landing">Go to the landing section of the page</a>

Normally, clicking the link will take you to the desired div with the heading near the top of the screen.

WordPress isn’t Normal

WordPress isn’t normal though. More accurately, many WordPress themes aren’t normal. These themes reserve space at the top of the screen for a fixed menu. That fixed menu will overlay the top of your div with a regular anchor tag approach.

There are many ways to work around this issue. If you rarely use anchor tags, you can just cheat a bit and create a false target slightly above the real target on the page, for example. This link goes to the same section of this article as the link above. In this case, the title of the section is not lost under the menu. However this is sloppy and looks different on different screen sizes because it puts the anchor tag above the paragraph that precedes the desired target as a work-around.

If you use anchor tags more often, you’ll tire of this approach and you’ll struggle at times trying to get the anchor in the right place as you try to control the height and appearance of an element that is hidden or has no content other than maybe a non-breaking space.

One way to fix anchor tags with the Divi theme

(If you got here from the first link, scroll up a little to see the title of this section.)
Recently we helped a client resolve this issue sitewide in the Divi theme with a helpful bit of script. Many thanks to divibooster for sharing the original concept in their blog. We used their script but accelerated the timing a bit. Their concept is to hide the anchor tag on landing then reveal it and scroll to it after a slight delay. Here’s our version of their script:

<script>
document.addEventListener('DOMContentLoaded', function(event){ 
    // is there a hash in the URL indicating the use of the anchor tag?
    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, 300);
            }, 500);
        });		
    }
});
</script>

The only changes we made were to add a comment and adjust the timeout delay and the scroll duration. For a full explanation of this script, see the original post on the divibooster site.