A jump link sends visitors directly to a section of a page. It is useful for long guides, pricing explanations and contact sections, and can be created with an HTML anchor on a supported block without writing a script.
IN THIS ARTICLE
01 Choose a stable destination
Pick a heading or section that clearly identifies the destination. Use a short anchor such as delivery-options, with no spaces, and keep it unique within that page. Treat the anchor as part of a public link: changing it later can break links already shared in messages or other articles.
02 Add the anchor and link
- Select the destination Heading or another block that supports an HTML anchor.
- Open its block settings, expand Advanced and enter
delivery-optionsin HTML Anchor. Do not include the leading hash in this field. - Select the text or button that should lead to the section and open its link control.
- For the same page, enter
#delivery-options. From another page, use the complete destination such ashttps://example.com/services/#delivery-options. - Save the content and test the link on the public page.
03 Check the landing position
Verify that the correct section comes into view and its heading remains readable. A fixed header can cover the top of the destination; if that happens, ask your designer to adjust the theme's anchor offset rather than inserting several blank paragraphs above the heading.
Use descriptive link text such as View delivery options so readers know what will happen. A same-page jump normally belongs in the current tab. Test keyboard navigation as well as clicking, especially when the destination sits inside a complex layout.
04 Example: connect a contents link to a stable WordPress heading
For a delivery guide, enter delivery-options in the destination Heading block’s HTML Anchor field and link the contents text to #delivery-options. The following markup shows the relationship the editor creates; you can use the block controls rather than manually replacing block HTML.
<p><a href="#delivery-options">View delivery options</a></p>
<h2 id="delivery-options">Delivery options</h2>
The anchor field does not include the hash, while the same-page link does. From another page, use the full published URL followed by that anchor. Keep the identifier unique and stable even if you later improve the visible heading’s wording.
Expected result: The contents link lands on the intended section on desktop and mobile. Keyboard users can follow it, a fixed header does not hide the heading, and copied sections do not introduce a second identical ID.
Why does a jump link miss its intended destination?
If nothing happens, compare the anchor and link character for character, including case and punctuation. Check for duplicated anchors created by copying a section. If the link works while editing but fails on another page, confirm that you included the correct published URL before the hash. Renaming a heading's visible text does not require changing a stable anchor unless the destination itself has changed.