How to add Anchor Links
Unlock Seamless Navigation: A Guide to Anchor Links in Squarespace
Click here to jump straight to the code.
Ever needed to link to a certain place on a specific page on your website, but not at the top? Perhaps you wanted to have a “table of contents” at the top of the page and link to that headline further down on the same page? Or even have a link jump halfway down a different page?
Squarespace doesn’t have a built-in way to accomplish this, but with a tiny bit of code, it’s easily done.
This tutorial has been tested on Squarespace 7.1 but should also applies to legacy sites built on version 7. Also since this code does not use JavaScript, it should also work on any Squarespace plan.
Adding your anchor link code
To jump to a certain spot on a page, whether from the same page or another, you’ll need to add an anchor link to your page. This is pretty much as it sounds: an anchor at a certain location on your page that you can link to from pretty much anywhere.
Add an anchor link to your page by adding a code block. Whether in the Fluid Engine or Classic Editor, either way, you add a code block to the place on the page you want to jump to.
The code can take several forms, depending on how you want things to look. I put how I do it further down, but I want to show you the easiest way first.
The easiest way
Usually, an anchor is going to accompany a heading of some sort. So the easiest way is to add an anchor link is to attach it to a heading, but with a code block rather than a text block. Simply add a code block to your page where you want the heading to be, rather than the actual text of the heading. Then, inside the code block, add the following code:
<h3 id=”anchor-link-name”>Headline Text</h3>
What’s happening here? This is the HTML code for a “Heading 3” area of text. Just replace the part where it says “Headline Text” with whatever text you want in your headline. The part that says “anchor-link-name” is the actual anchor. Just replace that with something descriptive to you, such as “about” or “sizes” or whatever works in your context. The “h3” is the part of the code that tells Squarespace to add a “Heading 3” to your page. And if you prefer, you can change the “h3” to any other heading size, such as “h1”, “h2”, or “h4”. Just be sure to also change it in the close tag at the end, with the “/”.
Once you’ve added your anchor, now you can link to that anchor from pretty much anywhere else following the instructions below. Once you click on that link, the browser will jump to your anchor link.
Downsides
There are a couple of down sides to doing it this way.
First, when a browser jumps to the anchor, most of the time it places the anchor at the very top of the screen, sometimes even off the top of the screen. So you end up further down the page than you intended. And since it’s usually connected to the header for the section you had it jump to, that heading can sometimes be off the top of the screen. That can be confusing for a user who doesn’t know what they’re looking at.
Second, since the anchor is connected to your text element, probably a heading, it limits you to what you can place at that location. What if you don’t want it connected to a text element? Squarespace doesn’t allow you to add an id, or an anchor, to other elements.
That leads me to…
How I do it
Here’s the way I prefer to do it. It takes a little bit more code, but it’s still very simple.
Instead of connecting the anchor to a text element in a code block, you can simply connect it to an invisible element on the page that’s pretty much there for that purpose. In this case, a <div> tag.
A <div> tag is an HTML (the language of the internet) element used for, among other things, identify a specific part of the page you’re looking at.
So, to add the anchor to a Squarespace page, you add a code block, and add the following code:
<div id="anchor-link-name" class="anchor-link"></div>
The only part in this code that you need to customize is the “anchor-link-name”. Just like above, you can replace that with something descriptive to you, such as “about” or “sizes” or whatever works in your context.
One more thing…
In the above code, there is a class name of “anchor-link”. That’s not built into Squarespace. That’s something we have to define ourselves, which we do in the Custom CSS panel in Squarespace. If that’s too scary for you, then you can use the easier way above. But even if you don’t know how to use custom CSS, if you copy and paste this code as is, it should still work. Be sure to copy everything, including the curly braces { and }.
// CSS code for anchor link
.anchor-link {
scroll-margin: 100px;
}
What’s happening here? In this simple code, we are defining a class called “anchor-link”. The class doesn’t need to do much, because it doesn’t have to. The only property we’ve given it is a “scroll-margin” of 100px. That means when you click an anchor link, the browser will jump to the anchor, but stop 100 pixels before the actual anchor. This solves one of the major down sides to jumping to an anchor, described above, where the browser often jumps too far. This keeps the anchor clearly in the viewable area of the page.
Adding your Link
Wherever you want to link from (not the target of the anchor link, but where you’re linking from), instead of adding a regular link in the Squarespace link editor, you add a pound sign in front of the anchor id that you defined when creating the anchor (see above). Something like this:
#about
Simple, right?!?
Then when you click that link, it jumps to your anchor.
But wait, there’s more
There’s one more thing that would make the experience for the user even better, which you can read more about here. Let’s just say this CSS hack can make the user experience a little less jarring.
In Short…
For those that don’t want to read all of the gibberish above and just want to copy and paste the code the way I prefer to do it, here you go.
First, add a code block to the page and add this code:
<div id="anchor-link-name" class="anchor-link"></div>
Be sure to change the “anchor-link-name” to something that makes sense to you in your context.
Then, add this to your Custom CSS panel:
// CSS code for anchor link
.anchor-link {
scroll-margin: 100px;
}
Lastly, add this link wherever you need to link to the anchor you just created:
#about
Be sure to change “about” to whatever name you gave your anchor id in the first set of code.
That’s it! You’re off to the races.
WAS THIS HELPFUL?
Do you think this tweak is dumb? Or did it save you a bunch of stress? Any other anchor link tweaks you have to share? Just leave a comment at the bottom of the page! 👇
