.png?table=block&id=219105a2-9d95-81b9-a7d9-fc2f08a223b2&cache=v2)
Last Edited Time
Jun 25, 2025 09:35 PM
Do not index
Do not index
Suggested Tag
Anchor Links in Squarespace
squarespace 7.0
user experience enhancement
Tags Synced
Tags Synced
AI summary
Create anchor links in Squarespace 7.0 by inserting code blocks with unique IDs, formatting URLs correctly, and testing on both desktop and mobile to ensure functionality. Common issues include mismatched IDs and fixed headers affecting scrolling.
Last edited by
Platform
Category
Topic
How to Create Anchor Links in Squarespace 7.0
TL;DR: Key Points
- Use code blocks to insert anchor points with unique IDs
- Format your URLs correctly with the page slug, hash symbol, and ID
- Always test before publishing (anchor links can be fickle)
- Mobile behaviour differs from desktop, so test on both
Setting Up Your Anchor Point
First, you need to mark where you want people to land when they click your link.
- Go to the section where you want the anchor point
- Add a Code Block
- Insert this HTML:
<p id="your-anchor-name">Your visible text here</p>
- Replace "your-anchor-name" with something descriptive (no spaces, use hyphens)
- Replace "Your visible text here" with what you want visitors to see
- Make sure 'Display Source Code' is turned off
Example: If you're creating a link to your pricing section, you might use:
<p id="pricing-section">Our Pricing</p>Creating the Clickable Link
Now you need the actual link that people will click.
- Add or edit a Text Block where you want the link
- Type your link text and highlight it
- Click the link icon in the toolbar
- In the URL field, enter:
[https://yoursite.com/your-page-slug/#your-anchor-name](https://yoursite.com/your-page-slug/#your-anchor-name)
Important: You need the full URL, not just the anchor. So if your page is
https://mysite.com/services/ and your anchor ID is pricing-section, your full URL becomes:
https://mysite.com/services/#pricing-sectionTest Everything
Anchor links break easily, so always test before going live:
- Save your changes
- Preview the page
- Click your anchor link
- Check it scrolls to the right spot smoothly
- Test on mobile too (this is where things often go wrong)
Common Issues and Fixes
Link doesn't work at all: Check your ID matches exactly between the anchor point and the link URL. One typo kills the whole thing.
Jumps to wrong position: Some templates have fixed headers that cover your anchor point. Add some padding above your anchor or adjust the positioning.
Works on desktop but not mobile: This happens with certain templates. The page might reload instead of scrolling. There's no perfect fix, but sometimes changing the anchor ID helps.
Quick Tips
- Keep IDs simple and descriptive:
contact-form,team-section,pricing-table
- Never use spaces in IDs (use hyphens instead)
- Don't start IDs with numbers
- Test in different browsers if you're having issues
Important Note About Squarespace Versions
This method only works for Squarespace 7.0. If you're on 7.1, the process is completely different. Check your version in Settings > Website > Website Tools.
FAQs
Can I link to anchors on other pages?
Yes, just use the full URL of the other page plus your anchor:
[https://yoursite.com/other-page/#anchor-name](https://yoursite.com/other-page/#anchor-name)Do all templates support this?
Most do, but some older or heavily customised templates might have issues. Test thoroughly.
Can I style the anchor text differently?
Yes, you can add CSS classes to your anchor point and style them in Design > Custom CSS.
Jargon Buster
- Anchor Links: Links that jump to specific spots on a page
- Code Block: Squarespace's tool for adding custom HTML
- ID: A unique label for HTML elements (must be unique on each page)
- URL Slug: The bit after your domain that identifies a specific page
Anchor links are simple in theory but fiddly in practice. Take your time with the setup, test everything twice, and remember that what works on desktop might behave differently on mobile.