Enhancing User Experience with Anchor Text Links in Squarespace
Adding anchor text links to your Squarespace website is a simple yet powerful way to improve user navigation. Whether you're guiding visitors to specific sections of a landing page or creating a smooth flow through a long FAQ, anchor links make it easy for users to find what they need. Plus, with a bonus custom CSS snippet for smooth scrolling, you can avoid any jarring page jumps!
In this guide, I'll walk you through the benefits of using anchor text links and show you three use cases where this feature shines.
Table of Contents
Watch the Video
Check out the YouTube video below 👇
How to Add Anchor Text
What You'll Need:
A code block to create the anchor in the section you want to link to
The URL format that connects your anchor text to the section
An optional custom CSS snippet to add smooth scrolling for a polished effect
First, add a code block to the section you want to anchor.
<div id="section-name"></div>
Then, set up your anchor link by highlighting the text and inserting the link, which should include your page URL followed by the section name from your code block.
For smooth scrolling, use this CSS code to ensure a fluid user experience.
To find the CSS panel, go to Website > Pages > Website Tools > Custom CSS
html {
scroll-behavior: smooth;
} //jump is smoothUse Cases
Dynamic Landing pages
Anchor links can transform your landing pages by making navigation easier and more intuitive. For example, if you want visitors to navigate from your site’s main menu directly to a “Services” section, an anchor link eliminates the need for endless scrolling.
Benefit: This feature not only improves the user experience but also keeps your landing pages clean and user-friendly. Visitors can jump directly to the content that interests them, which enhances engagement and reduces bounce rates.
How It Works: Set a code block in the section you want to highlight (like “about” or “services”), then link to it in your main navigation using /home#about as the URL format. Now, when users click on the menu item, they’ll be taken directly to the anchored section.
Mini menus for services pages or faqs
Anchor links also come in handy when you’re dealing with content-heavy internal pages like service descriptions or FAQs. Instead of forcing users to scroll through long sections, you can create a mini menu at the top of the page with anchor links to each relevant section.
Benefit: This makes it easier for visitors to quickly find the specific information they need, whether it's details about your service packages, process, or customer testimonials. It’s especially helpful for boosting usability on content-dense pages.
How It Works: Add a code block to each section of your page and create a text block or mini menu at the top. Link each menu item to its corresponding section using the same anchor link format—like /services#packages—to allow seamless navigation.
“Jump to recipe” for food Blogs
For food bloggers, anchor links can be a lifesaver. Adding a “Jump to Recipe” button at the top of your blog post allows readers to skip straight to the recipe without scrolling through the entire post.
Benefit: This feature improves the user experience by letting your readers get straight to the content they’re looking for, which keeps them engaged and coming back for more recipes.
How It Works: Add a code block where your recipe begins and create a button at the top of your post that links directly to the anchor text—such as #recipe. When you duplicate the post, you won’t need to update the anchor link, making your process faster and more efficient.
Conclusion
Anchor text links are a versatile tool that can greatly enhance your site's navigation, making it easier for visitors to find what they need without hassle. Whether you're building dynamic landing pages, simplifying FAQs, or making food blogs more user-friendly, anchor links paired with smooth scrolling can give your site a polished, professional touch.
Have any questions or want more tutorials like this? Feel free to get in touch—I’d love to help you take your Squarespace site to the next level.
Full Code
Add a code block to create the anchor in the section you want to link to
<div id="section-name"></div>
Here’s the URL format that connects your anchor text to the section, make sure to toggle OFF “Open in new window”
/page-url#section-name
Add to Custom CSS for smooth scrolling
html {
scroll-behavior: smooth;
} //jump is smooth
Hey hey, Marya here 👋🏼
I’m the creative force behind Yangu Web Studio and a top-rated web designer on Squarespace's exclusive Marketplace for experts.
I adapt my skills to diverse industries and businesses globally, of all sizes, specializing in crafting digital solutions tailored to your unique goals. If you want to discuss a potential project, you can drop me a line at marya@yanguweb.studio or vibe with me here. Alternatively, you can schedule a free 15-minute consultation call here.
