Anchor Link Offset Trick in Squarespace
Adding these style properties when creating an anchor will offset its scroll position.
<div id="anchor-tag" style="position:relative;top:-150px"> </div>
The Anchor Link Problem
Anchors links allow you to jump to a specific section of a page.
For example, click here to jump to the Learn CSS in Squarespace portion of this page.
We can even do this to other pages as well. Click here to jump to the FAQ’s section of my sales page for this same course. (Ignore the shameless promotion).
But there is a problem if your header is fixed to the top of the screen. When I jump down on this page, the words "Learn CSS in Squarespace" are covered by the header!
The Anchor link offset trick fixes this.
Build Your Anchor Link
First, let’s quickly recap how to build an anchor link.
To set an anchor you just need to add this code into a code block:
<div id="anchor-tag"> </div>
Replace the word anchor-tag with anything you want. Then we can link to this anchor by adding #anchor-tag into the URL field of a link on the same page (image 1) or add #anchor-tag to the end of the url for an external page (image 2).
Image 1: Anchor Links on the same page
Image 2: Anchor Links on an external page
To offset the placement of this anchor, so it doesn’t cover our header, we just need to add this code into the anchor code.
<div id="anchor-tag" style="position:relative;top:-150px"> </div>
And just adjust that -150px value to whatever you’d like.
Try this on your website and leave me a comment if you have any questions!
If you wanted to use a different offset on mobile, first you need to move the styles into the Custom CSS area. You can do that be removing the style="position:relative;top:-150px" and replacing it with a class.
New HTML
<div id="anchor-tag" class="anchor-offset"> </div>
Now you can use some CSS to target that class and provide a different offset for mobile. Add this to your custom CSS area.
/*Desktop Offset*/
.anchor-offset {
position: relative;
top:-150px;
}
/*Mobile Offset*/
@media(max-width:767px) {
.anchor-offset {
position: relative;
top:-75px;
}
}
Learn CSS in Squarespace
If you’re interested in learning more about CSS in Squarespace, check out my Learn CSS in Squarespace course. This course is for people who are serious about improving their Squarespace Website building skills. I wholeheartedly believe that CSS is the single best skill you can learn if you want to become a better Squarespace designer.
