How to Create Anchor Links in Squarespace 7.1


Anchor links are a simple and effective way to guide your website visitors smoothly through your content. Instead of making clients scroll endlessly, anchor links let them jump directly to the section you want them to see.

When to Use Anchor Links

Anchor links are perfect for long pages or one-page websites. A common example is an “Explore” or “Learn More” button. When clicked, it can smoothly scroll visitors to a specific section, like a services overview, portfolio showcase, or FAQ section.

Other situations where anchor links are helpful:

  • FAQ pages, to jump directly to specific questions

  • Pricing tables, linking directly from call-to-action buttons

  • Blog posts, to link to key sections within a single article


How to Add an Anchor Link in Squarespace

To create a button or text link that scrolls to a specific section on your page, follow these steps:

1.Add an HTML Block at Your Target Section

  • Edit the page and add an HTML block where you want the link to land.

  • Insert the following code:

    <div id="services"></div>

  • Replace services with a word that matches your section, such as about, contact, or team. For example: <div id="about"></div>


2. Link Your Button or Text to the Target Section

  • Select the button or text that will act as the anchor link.

  • Click the link icon and type #services (replace services with your chosen ID). This tells Squarespace where to scroll when the link is clicked.


3. Test Your Anchor Link

  • Click Save and preview the page.

  • Click your button - it should scroll smoothly to the section with your HTML block.

  • If it doesn’t work, double-check that the ID in your HTML block matches exactly the ID in your link (IDs are case-sensitive).


Tips for Anchor Links

  • Keep your anchor IDs short, simple, and descriptive.

  • Place the HTML block exactly where you want the link to land, so visitors see the intended content immediately.

  • Anchor links work best for long or one-page websites, enhancing navigation and user experience.

Using this method ensures precise control over where your anchor link lands and keeps the experience smooth and professional for your visitors. An “Explore” button that scrolls straight to your services or portfolio can make your site feel polished and engaging.

Previous
Previous

How to Use CSS to Add Lines Between Sections in Squarespace 7.1

Next
Next

How to Fix the 5 Most Common Website Issues