Why does my anchor link not move to the target after being clicked?

If the Anchor Link ID is the same as a Heading on your page, it can create a duplicate ID in the code and break the anchor link functionality.

Regardless of how you create an anchor link, the ID you create needs to be unique and can only exist one time on the page.

Use a shortened anchor link ID to avoid the possibility of creating a conflict with existing heading IDs.

Heading IDs as Anchor Links

In POWER theme, the code automatically creates a unique HTML ID for all headings (H1-H6) that do not have an HTML ID defined.

The unique ID that is created is based on the text of the heading text, so if your heading is called "Introduction to Anchor Links" then the unique ID will be "introduction-to-anchor-links" providing the capability to further modify this text via CSS using the new ID.

Because the heading now has an ID, you can then use this ID as an anchor link by configuring the URL to #heading-name and not have to configure an additional anchor link.

Headings with Identical Text

This get's a little complicated, so let's look at an example.

Let's say I have a page with a section near the bottom with "Powerful Services" as the Title and it is set as an H2 heading.

At the top of the page, I create a heading using an H4 in the text called "Powerful Services" and set the URL to #powerful-services so that it will jump to the section at the bottom of the page.
  1. The heading at the top of the page where you've configured the link comes first in the code, so the heading ID is set to "powerful-services"
  2. Even though you created the Powerful Services section first, because it is lower on the page, the code will change the ID from "powerful-services" to "powerful-services-1"
  3. The link you've configured as #powerful-services will not jump to the bottom of the page because the ID is now "powerful-services-1" instead of "powerful-services"

To avoid this, you can either make your headings unique, such as using "Services" as the heading at the top and "Powerful Services" as the section heading, or you can account for this and set your anchor link to "#powerful-services-1" which will allow it to link to the proper heading ID.