How to Create Anchor Links in Squarespace Using Basic HTML
I am constantly seeking ways to enhance the user-friendliness of my clients' websites, and one of my preferred methods is by implementing anchor links.
Rather than directing users to a different page, an anchor link can take them directly to a specific section of a page, reducing the amount of scrolling required on their part. By incorporating a bit of custom code, you can incorporate numerous anchor links, making it simpler to navigate long-scrolling pages.
A few examples of Anchor link usage
Anchor links are advantageous for almost any lengthy web page. Listed below are some of my preferred applications:
FAQ pages: Scrolling through an entire FAQ page to locate the answer to a specific question can be frustrating. To resolve this issue, create anchor links for each response and add navigation options at the top of the page.
Sales pages: If a potential customer is prepared to purchase your product or service, why should they be required to scroll through the entire sales page? Include "Buy Now" buttons throughout the page, anchored to the payment section.
Home page: Arrange buttons on your home page to link to specific areas of other pages on your website. For example, they may be linked to a question on your FAQ page, the pricing section of your services page, or a contact form.
STEP 1: Select the section you wish to anchor to.
Scroll to the desired section and insert a code block immediately above it.
STEP 2: Name the section.
Within the code block, copy and paste the following code:
<div id="yoursectionname"></div>
Note: Replace “yoursectionname” with whatever you’d like to call your section. (Make sure to keep the quotation marks intact)
For example, if I had a section named About, I would use the following code:
<div id="about"></div>
Step 3: Create a button or link to your desired section
To do this, navigate to the desired page or text where you want the link to appear and create it as you typically would. However, when you reach the 'link' section, instead of simply adding the page, use the page URL where the code is located in step 1, add /#yoursection to the end of the URL and click save. Example below.
And there you have it! You can now create anchor links in Squarespace using basic HTML. Like always, feel free to reach out if you have any questions!
