How to Create a Jump Link on a Page
Jump links are a simple way to help visitors move to a specific section of a page without scrolling. They work well for listings, contact sections, neighborhood guides, FAQ areas, and longer landing pages.
In the video below, you can see exactly how to set one up.
What a Jump Link Does
A jump link sends someone from one spot on a page to another spot on that same page. For example, you might have a link near the top that says “View Listings” and when someone clicks it, they jump straight down to the listings section.
If the link stays on the same page, you only need a hashtag followed by the label. If the jump goes to a section on a different page, you need the full page URL along with the hashtag target.
Step 1: Create the Link at the Top of the Page
Start where you want the clickable link to appear. Highlight the text you want visitors to click.
Then add your link target using a hashtag. For example:
#listingsThat tells the page to jump to the section marked with that same name. If you are linking within the same page, the hashtag is all you need.
Step 2: Update the Page
After adding the link, save or update the page. This keeps your jump link in place before you set the destination anchor lower on the page.
Step 3: Go to the Section Where the Link Should Land
Next, scroll down to the section where you want the jump link to go. In the example from the transcript, the target section is the listings area.
You want to place the anchor code right where the jump should land. That could be above the listings, above a contact form, or above any section you want people to reach quickly.
Step 4: Add the Anchor Code
Go into the code for the page and place this line exactly where you want the jump link to land:
<a name="listings"></a>The word inside the quotation marks must match the hashtag used in your link. So if your link is #listings, your anchor name must be listings.
Example of How It Works
If the clickable text at the top links to this:
#listingsThen the destination section should include this:
<a name="listings"></a>Once both are in place, clicking the link should take the visitor directly to that part of the page.
Keep the Name Simple
The jump link label does not need to be long or optimized for SEO. It just needs to be easy to match.
Examples:
#listings#contact#sonoma
Simple names make it easier to set up and less likely you will mistype something.
Where You Can Use Jump Links
Jump links can be used in many places across a site. A few common examples include:
- Jumping to property listings
- Jumping to a contact form
- Jumping to a city or neighborhood section
- Jumping to FAQs
- Jumping to featured homes or search results
You can also add multiple jump links on the same page, as long as each one points to its own matching anchor.
Important Detail to Remember
Whatever you use in the link must exactly match the anchor name. If the link says #contact, the anchor must be:
<a name="contact"></a>If those do not match, the jump link will not work correctly.
Quick Reference
Use this at the top where you want the clickable jump link:
#linkUse this where you want the jump link to go:
<a name="link"></a>Final Tip
You can place the anchor at the top of a section, above a heading, or directly above a block of content. The exact placement depends on where you want the visitor to land when they click the link.