Adding Anchor Links to Your Website

Adding Anchor links to your website

What are Anchor Links?

An anchor link ("page jump") is a special URL that takes you to a specific place on a page. For example, the table of contents in this guide contains anchor links that take you to each header.

There are two ways of creating anchor links: On an Index Page and/or on a Regular Page. In the video, I show you how you can create both.

Adding anchor links within Index Pages

  1. Find the Page Slug (or URL) - You will need to navigate the section settings, click the gear icon, scroll down until you find the url section.

  2. Copy the URL Slug of that specific section.

  3. Create a link at the top of your navigation by clicking the “+” symbol and adding a link page.

  4. Name your page, and in the URL section of the link settings, add a “#” symbol, then paste the URL Slug you just copied. It should look something like this: #your-page-slug or #yourpageslug.

  5. Make sure the “open in new tab” remains unchecked

  6. Click SAVE.

Now when you test your link in the preview mode, your link in the navigation that you just created should take you down the section of the page you linked to.

Adding anchor links on a regular page:

Step 1 - create your links

Screen Shot 2019-02-14 at 4.18.50 PM.png

Create a link in your navigation or anywhere on the page. In the training video above, I create my own navigation links with the text block, highlight the text and create a link.

In the link settings, you will create a unique ID. I use the following in the training video:

  • #design

  • #business

  • #squarespace

With each unique ID, you should be including the name of the page you are adding these anchor links to. Again in the training, I was adding these links to the blog archives page, so it should look something similar to this:

  • /blog-archives#design

  • /blog-archives#business

  • /blog-archives#squarespace

step 2 - Add your anchor points

Add a code block to the section you want your links to jump to.

Screen Shot 2019-02-14 at 4.42.14 PM.png

In the code block, you want to add: <p id="anchor-link-example">This is where the link will jump to</p>. You can easily interchange the ‘p’ (paragraph text) for any heading you’d like, such as h1, h2, h3.

Make sure you are not adding the “#” symbol in the ID area. Using the example from above, it should look similar to this:

  • <p id="design">Design</p>

  • <p id="business">Business</p>

  • <p id="squarespace"></p> (if you don’t want to add the words, you can remove them so they look like this

Repeat steps above for every anchor you create. Make sure you test them inbetween to make sure your links are working correctly - The links are the top, should take you down to the section you’ve just add the anchor.