Skip to content

How to use anchor tags and IDs to scroll, or link to, a certain part of a page

Have you ever clicked on a link which took you to a page, but not to the top? Perhaps it took you to a relevant part of an article, or a certain product section on a website.

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 Anchors and IDs – they’re a really useful tool in any web developer’s toolkit.

Here’s an example of using this powerful combination in pure html code:

<html>
 <head>
  <title>My wicked-sweet website of awesomeness</title>
 </head>
 <header>
  <nav> 
   <a href="#first-block">First Block</a>
   <a href="#second-block">Second Block</a>
  </nav>
 </header>
 </body>
  <div id="first-block" style="height: 200px;"> 
   <p>This is the content of my first block.</p>
  </div>
  <div id="second-block" style="height: 200px;">
   <p>This is the content of my second block"</p>
  </div>
 </body>
</html>

Okay, that’s a silly page, and it’s largely useless, but the point here is that clicking on the “first block” link would take the user to the first block on the page, and clicking on the “second block” link would take the user to the second.

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

This can also be useful in WordPress, our Content Management System (CMS) of choice. Depending on the tools you’re using to build your website (a page builder, WordPress’ visual editor, whatever) there are different ways to assign IDs to elements on your page. Look up the documentation for the tools you’re using. 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!

Allen is a self professed geek and technology lover. He's always playing with one of his various websites, and loves helping customers with theirs. He can often be found with a coffee (light roast, please) in his hand and a smile on his face... or with a plate of bacon. Mmm, bacon.

Leave a Comment