Using Anchor Tags on Squarespace
Table of Contents
Do you want to add links on your website that causes people to scroll down to a different section of the website? Here are instructions on using anchor tags!
One-page scrolling websites are slowly becoming more and more common. Squarespace itself has many one-page templates where the menu actually leads to different parts of the same page.
Now, there will be times where you want to accomplish this type of scrolling, but don't know how to make it work. That's why we're going to show you exactly how. At the end of this guide, you'll be able to create an anchor tag that will take people anywhere on any page. So let's get started.
Step 1 - Adding Code Block
Go to the page where you want to add an anchor tag and click EDIT. Scroll down to the portion of the page where you want the scroll to land.Insert a CODE block at this location.
Step 2 - Adding Anchor Tag ID
In the CODE block, go ahead and add a unique ID. For example, if the section is for a paragraph for "ABOUT US" you can make the ID about-us-section. You can name it anything you want, just don't use spaces or special symbols except for the hypen (-).
Step 3 - Creating a Link
Now you can go ahead and create a link where you want, it can be in the menu, it can be a picture with a link, or even a word or a button, and have the link lead to your new ID. So continuing from the above example, you can enter in the destination as #about-us-section.
One thing to note here is that if the link leads to a different page. For example, if you put a button on your home page that says FIND OUT MORE and it leads to a specific section on a different page, make sure you include the URL SLUG for the other page. So for example, if my #about-us-section was on my ABOUT page and the button is on the home page, we would set the link as /about#about-us-section. If we didn't include the /about then the browser would look for an ID called #about-us-section on the HOME page, and it'll find nothing there. So we have to tell the browser that the ID we mention is on the ABOUT page.
BONUS - Adding Smooth Scrolling (Not Required)
Now that you have your anchor tag and links done, you'll notice that this will take people to the specific section, but there's no animation, so it's hard to tell that the page has been scrolled. That's where smooth scrolling comes in. With smooth scrolling enabled, people will land at the top of the destination page, and then the browser will automatically scroll them smoothly down to the section needed.
To get smooth scrolling working is super simple. Just copy and paste the following code into DESIGN > CUSTOM CSS.
html { scroll-behavior: smooth; }
