How to Link to a Specific Section on Your Squarespace Page (with Anchor Links)
Ever wondered how to link a button or piece of text to a specific section on your Squarespace page? Or how to make a button scroll down the page to your pricing, contact form, or FAQs? That simple but powerful feature is called an anchor link, and it can totally transform how people navigate your site.
Letting visitors skip straight to what they’re looking for—like pricing—means they don’t have to scroll through everything else. That ease of use keeps them engaged, builds trust, and makes them way more likely to take action.
Anchor links help make your website feel quick, clear, and intuitive. Even if someone only has a couple of minutes to browse, they’ll still find your most important content—fast. And since anchor links used to require custom code, we’re thrilled Squarespace 7.1 now makes this feature available to everyone (no tech headaches required).
Reason number 10,000 why we love them so much.
Keep reading for a step-by-step walkthrough on how to add anchor links in Squarespace—plus our top 5 favorite ways to use them to guide traffic, improve conversions, and make your website work smarter. And don’t worry—if you’re still using Squarespace 7.0, we’ve got detailed instructions for that too (with and without code).
What Are Anchor Links in Squarespace and Why Are They Helpful?
An anchor link (also referred to as a page jump) is a special URL that, when clicked, takes you directly to a designated place on the same web page. It’s sort of like website teleportation!
There are so many reasons why anchor links are a game-changer for your website:
They create a better user experience: Implementing anchor links (especially on your most content-heavy pages) reduces the amount of searching and scrolling that can turn visitors away.
They highlight key information: You control what page jumps are featured—so your most important content gets the spotlight.
They can improve conversions: Bring visitors directly to contact forms, pricing info, and CTAs—so casual viewers become paying clients faster.
They offer SEO benefits: Linking directly to high-value sections can lower bounce rates and help boost search rankings and featured snippets.
Essentially, anchor links are like a cheat code for creating the most effective web browsing experience possible. Let’s walk through exactly how to add them.
How to Add Anchor Links in Squarespace 7.1 (Step-by-Step)
First things first—this feature is currently only available for Squarespace 7.1 websites (if you’re on version 7.0 custom CSS is still required)! But don’t worry, we’re going to show you step-by-step instructions on how to add an ancho link with and without code (so yay to anchor links no matter what version of Squarespace you’re on!).
Okay Squarespace 7.1 folks here we go…
1. Assign an Anchor Link Slug to a Section of Your Website
Squarespace now allows you to attach an anchor link slug to specific page sections. This works for:
Block Sections
Auto Layouts
Course Sections
Gallery Sections
Video Sections
🛠️ Pro Tip: For unsupported sections like Blogs, Events, or Shops, add a blank section above it and attach the anchor link to that.
To add your slug:
Click Edit in the top left to enter editing mode.
Go to the desired section and click Edit Section (top right).
Scroll to the bottom of the Design tab and find the Anchor Link field.
This can be anything you’d like to signify that particular section (ex: course-pricing, contact-form, etc). The text field already includes a hashtag at the beginning of your slug, which cannot be deleted, and it will automatically turn spaces into dashes.
And if you have multiple anchor links around your website, make sure that each slug has its own unique name. No doubling up!
This slug will also appear at the end of your site's URL in the browser, so make sure it’s something you don’t mind people seeing.
Click the Copy Link icon to save the slug.
2. Add the Anchor Link
Next, you’ll want to create the actual anchor link for visitors to click on in order to jump to your designated section! You can use:
Text
Buttons
Navigation Links
Image Links
The main goal is to make the anchor link easy to find and enticing so that visitors want to click it.
Adding an Anchor Link Using a Button
If you don’t already have a section you’d like to add the link to, go ahead and create that now! We generally recommend adding your anchor link towards the top of the page so that it’s the first thing people will see, but feel free to add it anywhere that works for the layout of your particular page.
Once you know where you want to add the anchor link, click Add Block in the top left corner of that section.
In the pop up window, choose Button (you can also choose text, image, or any other block type you’d like to use for linking!).
Once you’ve added your button, click on it and then click on the Pencil Edit icon to access the button settings.
In the pop up window, under the Content tab, you can add text to your button (be sure to label it clearly, describing what it is you’re linking to) and attach a link.
To attach your anchor link slug, click the Attach Link button and paste in the slug that you previously copied to your clipboard.
You can then click out of the button settings window and save your changes. You’ll need to save and exit editing mode in order to publish your anchor link and see it in action!
Adding an Anchor Link Using Text
Once you know where you want to add your anchor link, click Add Block in the top left corner of that section and choose the Text Block.
Once you've added your text, highlight the word or phrase that you'd like to link and click the Link Icon in the text toolbar.
Paste in the anchor link slug that you previously copied to your clipboard and press enter.
You can then click out of the text block and save your changes. You’ll need to save and exit editing mode in order to publish your anchor link and see it in action!
Adding an Anchor Link to your Header Navigation
If you'd like to attach an anchor link to one (or multiple) of your main navigation items, you can do so following these steps.
First, in your Pages Panel, under Main Navigation add a new Link.
In the pop-up window, give your link a name and then in the link field, paste in the anchor link slug that you previously copied to your clipboard.
You can then click Save and the anchor link will automatically be added to your main navigation.
5 Smart Ways to Use Anchor Links on Your Website
1. Create a “Table of Contents” on Your FAQ Page
FAQs are a great resource for your potential customers, but if you have an FAQ page with dozens of questions, then anchor links can help you organize topics.
Start by grouping your FAQs into clear categories. For example, if you’re a photographer, you might organize your questions under headings like:
Pricing
Booking
Photo Review Process
Add-Ons & Extras
Then, add anchor links to each section and connect them to your table of contents at the top of the page. It keeps things organized and makes it easy for visitors to get answers quickly—especially when they’re short on time.
2. Add a “Back to Top” Button
If your website contains a ton of content and you want to provide an easy, no fuss option for visitors to get back to the top of the page after scrolling, try adding an anchor link that's connected to the first section of the page.
For long pages, add a button that jumps to the top. It’s perfect for:
Sales pages
Resource pages
Any content-heavy page
This small touch improves usability and convenience, which is amazing for viewer retention.
3. Offer a Shortcut “Jump to Pricing” Button
Have you ever used a “jump to recipe” button on a cooking blog? This follows the exact same idea, but instead, you’ll be sending visitors directly to pricing details!
For a lot of people, getting straight to the point is much more effective. They just want to know the bottom line which is why “jump to” shortcuts can be so useful. They give potential clients who are eager to move forward the opportunity to do so asap.
A “jump to pricing” button would be great for:
Sales pages
Homepages
Blog posts announcing your latest offer
✨ Bonus: Our Sales Page Add-On Templates for Squarespace include built-in anchor links so your sales flow is seamless.
4. Build a One-Page Website
For a lot of businesses, one-page websites can be super effective!
They're simple, straight to the point, and can be a great way to showcase only the most important information about your business to visitors. Also, anchor links are practically made for a website like this.
Some businesses and/or entrepreneurs that might benefit from a one-page website include:
Restaurants
Artists
Life Coaches or Different types of Instructors/Teachers
Fitness Studios
But truly, any business can make the one-page format work for them.
So, if you do have a website that's only one page, help your viewers navigate through the sections by creating a main menu comprised only of anchor links. This way, each navigation item will lead directly to a different section of the page.
Pro Tip: Combine this idea with a "Back To Top" button to make navigating the page even easier for visitors.
5. Utilizing Anchor Links for Long-form Landing Pages
Long-form landing pages are great for storytelling—but easy navigation is key.
Take some time to consider what the 2 or 3 most important sections of your landing page might be, and then create a flow throughout the page with markers (highlighted buttons/links) that take visitors straight to those sections.
You could start with a sign me up button straight away (for those who don't need any further convincing) followed by a course preview link once you’ve introduced your offering, and then add a view frequently asked questions button before visitors have the chance to click away.
Utilizing anchor links in this way allows you to create a long and comprehensive landing page while still ensuring that potential customers will be given every opportunity to jump ahead to what matters most to them.
Just be sure to make it clear what the link is “jumping” to and don’t be shy about pointing out the shortcut (ex: "Skip To")!
Example: On our Iris Sales Page Template, we use buttons like “Skip to FAQs” and “Preview the Course” to guide traffic. You can too!
How to Add Anchor Links in Squarespace 7.0 (No Code Needed)
Unfortunately, the new, built-in anchor links feature isn’t available for Squarespace 7.0 websites. However there are still two different ways that you can create anchor links in Squarespace 7.0. So let's walk through those now!
The first way works for INDEX pages only. If you are using a regular Blank Page, scroll down to the next set of instructions (you'll need a little bit of basic code for that).
Index pages are a great place to use anchor links, because they’re usually long scrolling pages broken up into different sections.
In fact, sometimes these pages can get so long that adding anchor links to the page is almost necessary. This way, when someone clicks on an anchor link, it will scroll straight to a particular section of the page vs them having to scroll on and on to find what they need.
And with Index pages in Squarespace 7.0 it’s really easy to add anchor links. You don’t even need to use any code.
To get started, first you will need to find the URL of the particular section you want the anchor link to jump to. To do this, head over to your Pages Panel and locate your desired section (in this case, it's the Home 3 section under our Home Index Page). Then hover over the section name and click on the Settings cog to the right.
In the Settings pop-up window, under the General tab, locate the URL Slug (ex: /home-3). This will be your link, so go ahead and copy it.
Now head back to your Homepage and choose the section where you'd like to place the actual anchor link. You can add it anywhere on the page that makes sense for your layout, but in this case, we’re going to add an anchor link to the Home 1 section that jumps to the Home 3 section.
You can add the anchor link via a button, image, or just a regular text link. Anything you can add a link to, you can add an anchor link to! For this example, we’ll use a button.
Once you’ve added your button, click the Pencil edit icon to access the button settings.
Next, under the Content tab, add some text to your button so visitors know what they'll be jumping to (ex: Jump To Pricing or Skip To Video), then click Attach Link and paste in the URL Slug that you copied previously. You’ll then need to add a hash symbol (#) to the beginning of your URL to complete the anchor link.
Once you've done all of this, you can click out of the settings window and save your changes in order to see the anchor link in action!
Note: If the link isn’t working, it might be because you’re in preview mode. Try visiting your live site out of the editor or in incognito browser mode and try it there.
If it’s still not working, it might be because you're using the Pacific template. If you are, add “-section” to the end of your link (ex: #home-3-section) and then test it again.
How to Add Anchor Links in Squarespace 7.0 With Custom Code
Now let’s walk through how to add an anchor link to a regular Blank Page in Squarespace 7.0. This does involve a little bit of code, but it’s basically copy and paste, so not too complicated!
First things first, navigate to the page you want to work with, and then add a Code Block where you want your anchor link to land.
Inside the code block window, paste in the following code:
<div id="your-ID-here"></div>
You can then change the text inside the speech marks (your-id-here) to anything you like, but be sure to keep this ID relevant to whatever it is that you're linking. This will help keep everything nicely organized.
And keep in mind that you can’t use spaces in this unique ID, so use a dash instead if you have multiple words. For example:
<div id="sign-up-form-link"></div>
<div id="contact-us-here"></div>
Also, if you plan to use a code block somewhere else on your website (or in your CSS editor) make sure that this unique ID is different from anything else you already have or plan to have on your site to avoid coding conflicts.
Once you’ve added and customized the code, click out of the code block. It’s going to look like there’s nothing on the page but an empty block, but don’t worry - when the time comes it will do its job!
Note: If you are familiar with code, feel free to add text inside the div tags if the blank code block is taking up too much space on the page.
Finally, add a button, text, or image link (just like we did before) to the same page wherever you want the anchor link to be placed.
Access your link's settings and, where you would normally paste in a URL, you’ll instead type or paste in your unique ID and add a hashtag to the beginning to complete the anchor link.
You can then save your changes and that’s it! Pretty simple, right
Ultimately, anchor links make life so much easier for you and your site visitors. They also create a better user experience, help to improve conversions, and can boost your SEO. Even if you didn’t realize anchor links were something you needed before, we know that you won’t be able to live without them now!
We love Squarespace for giving us this new feature and, as always, we encourage you to get in there and play around with linking different sections to see how things work and how you can best use the tool to its fullest potential.
Simple, right? Click the button below to see how it works (this is the Page/Code method)
Make sure to check out some of our other quick code tricks for customizing your Squarespace site below! 👇
How to customize your Squarespace cookie banner design
How to animate your links on hover in Squarespace 7.0 & 7.1
How to create a sticky header nav in Squarespace
How to add a background color to a text block in Squarespace
6 fun code snippets for your Squarespace web design
Liked this post? Pin it to Pinterest!
