Skip the logo and desktop navigation, to main content

Ecolog Climate Positive Workforce We have planted 413 trees

How to link within a page, or jump to a section in a page

I don’t know about anyone else, but, there is so much complicated code in my brain, I often forget the simple stuff! So for the sake of reference, I’m creating this post so I don’t forget – and you don’t either!

Linking to anchors is very similar to normal links. Normal links always point to the top of a page. Anchors point to a place within a page.

A # in front of a link location specifies that the link is pointing to an anchor on a page. (Anchor meaning a specific place in the middle of your page).

To link to an anchor you need to:

  • Create a link pointing to the anchor
  • Create the anchor itself

An anchor is created using the <a> tag.
If you want to create an anchor called section5, you simply add this line where you want the anchor to be:

An A link with a name attribute

After doing this, you can make a link pointing to the anchor using the normal <a> tag, like this:

An A link with a href attribute

Note:
When linking to an anchor on a page you need to put a # in front of the anchor.

When you link to an anchor on the same page, simply enter:

An A link with a href attribute

When you link to anchors on external pages use this syntax:

A hastag used in a link to jump to a section

Anchors are generally used when you create pages with considerable amounts of text, perhaps on a FAQ page, when using an accordion or Policy document.

You would typically make an index at the top of the page linking to the anchors that have been added to key places in the text that follows, such as a Index, or Chapters.