How to create links that scroll to page content

Have you ever clicked on a link which took you to a page, but not to the top? Have you ever clicked on a menu item and had it, instead of loading a new page, scroll down the current page?

This is done with link Anchors and IDs – they’re a really useful tool in any web developer’s toolkit.

Here’s what this looks like in some very basic html:

<header>
  <nav> 
   <a href="#first-block">First Block</a>
   <a href="#second-block">Second Block</a>
  </nav>
</header>
<article id="first-block"> 
   <p>This is the content of my first block.</p>
</article>
<article id="second-block">
   <p>This is the content of my second block"</p>
</article>

There’s two examples of this in action in this example, but I’ve highlighted only lines 3 and 7 to show you just the first example of this.

Using a #<myid> in an <a> (anchor) tag tells the browser to scroll to the element with id="<myid>" assigned. This is why, if you’ve never heard it before, element IDs need to be unique.

This can be used to create single-page navigation, one-pager websites, or even linking to specific sections on a web page from a completely different page

But wait! What if my link appears on multiple pages (like in a menu) and not every one of those pages has my content with id="<myid>" on it, so it’s only going to work on one page!

You’re absolutely right. The above menu link will work great if you only have a one-pager website, but how do we fix this to ensure the link works successfully from any page on your website?

The answer is to add the page URL to the front of your link.

You can use either the Relative URL or the Absolute URL version. We tend to prefer the concise nature of the relative URL best.

In the examples above, the permalink for the about page is “about” and the permalink for the contact page is “contact-us”. Make sure you use the correct permalink (also called a slug) for your pages.

If you need to find the permalink for any given post, the permalink is shown in the WordPress 5+ block editor when editing any given page under the Document tab.

How to use WordPress to create on-page links (page jumps)

Now we’ll take the details about how this all works above, and apply it to WordPress, our Content Management System (CMS) of choice, and its various tools.

Creating Anchor IDs on your WordPress page

Depending on the tools you’re using to build your website (a page builder, WordPress’ visual editor, etc) there are different ways to assign IDs to elements on your page and to link to them. Here’s how to create those IDs:

• Using the built in WordPress 5+ Block Editor (headings only)
• Using BeaverBuilder
• Using Divi (half way down the page)
• Using Visual Composer

In general, with most page builders, you can find the option to enter a custom ID under any module’s first tab or the Advanced tab. However, if that’s not true of your WordPress page builder, look up the documentation for your builder and you’ll surely find an option to enter an ID for any item you add to the page.

Creating links within WordPress content

To link to those anchor IDs that you just created, create your link the way you normally would by selecting the text you wish to link, then clicking the link button (typically an icon that looks like a chain). Where you would normally enter the URL to link to, instead enter #<myid>

Creating links within your WordPress menu

If you wish to create a link to your page content within the WordPress menu you have on all pages, here’s how to make that happen.

1. Edit your menu the usual way by going to Appearance > Menus and selecting your menu from the drop down list (if you have more than one).
2. On the left, click on “Custom links” to add a custom link. Make the Link Text whatever you wish to appear in the menu and set the URL value to /permalink#<myid> just like we did above. (Be sure to use the correct permalink for the page where you’re linking to. If it’s your homepage, it’s just a slash: /#<myid>)
3. Click the Add to Menu button, and it will appear at the bottom. You can re-arrange its positioning to wherever you would prefer it appear in your menu.
4. Click the Save Menu button to make your changes live.

To learn more about working with WordPress menus, like how to remove an item and how to create sub-menus, check out the WordPress codex here.