Today's blog is all about being smooth, not in real life, just on your Squarespace website.

I'm definitely not certified in being smooth IRL, but I am certified to give you excellent advice on how to woo your clients and customers with Squarespace hacks and design tips. 

In this post, we'll explore the benefits of adding anchor links with smooth scroll functionality to your Squarespace website and provide you with an easy-to-follow, step-by-step tutorial. So, let's dive in!

But first things first, What is an anchor link? 

An anchor link, also known as a page anchor or bookmark link, is a hyperlink within a web page that allows users to navigate to a specific section of the same page or to a different page on the same website. Instead of taking users to an entirely new URL, anchor links scroll the user down to a designated section or content block within the current page.

Anchor links are handy for long web pages or pages with multiple sections...

Anchor links are handy for long web pages or pages with multiple sections, as they provide an efficient way for users to jump to the exact information they're interested in without requiring them to manually scroll through the entire page to get to what they want.

Anchor links are commonly used in navigation menus to provide quick access to different sections of a single-page website. They're also employed within long articles, tutorials, or product pages to help users find relevant information efficiently.

For example, on a single-page website for a restaurant, the navigation menu might have links like "Menu", "About Us", "Contact", etc. Clicking on any of these links would scroll the user down to the corresponding sections on the same page.

And what do we mean when we talk about 'smooth scrolling' or 'smooth scroll'?

Smooth scroll, also known as smooth scrolling, is a web design and user experience (UX) technique that enhances a website's visual and navigational aspects.

Instead of the traditional abrupt jump from one part of a webpage to another, smooth scroll provides a more fluid and visually pleasing transition as users navigate through a website. 

When smooth scroll is implemented, clicking on a link or taking an action that triggers a change in the page's position (such as an anchor link or a navigation menu item) results in a gradual and animated scrolling motion to the new content. This animation creates a sense of continuity and feels sleek, making the transition between sections of a webpage more enjoyable for everyone involved! 

How To Create Anchor Links in Squarespace

This works on 7.0, 7.1 and Fluid Engine

Step 1:

Decide where you want to place the anchor link on your page. Having an anchor link in your navigation menu or within long-form content is usually beneficial to facilitate easy navigation.

Step 2:

Highlight the text or element you want to turn into an anchor link and click the link icon in the Squarespace editor.

Step 3:

In the link editor, add a "#" symbol followed by a name or ID you want to assign to the anchor. For example, you can use "#about" for an anchor link to the "About" section of your page.

Step 4:

Add a code block to where you want the anchor link to scroll too, and add the following code: 

<div id="about"></div>

You can change the id to whatever you put after the # above. i.e. if you put #bio in the link above, you would put id="bio" in the code block. 

Step 5:

Save your changes, and the anchor link is ready to be used. But you'll notice if you click it on now, it will abruptly jump to that area of the page instead of gliding their smoothly, queue, smooth scroll...

How To Add Smooth Scroll on Squarespace:

Step 1:

Navigate to the 'Website' tab on the left. 

Step 2:

Navigate to the "Website Tools" area at the bottom, and click on "Custom CSS" to open the CSS editor.

Step 3:

Copy and paste the following code snippet into the CSS editor:

/* Smooth Scroll */

html {

  scroll-behavior: smooth;

}

Note: you navigate to the CSS panel by clicking on Website and scrolling down to the bottom where it says Website Tools > Custom CSS. This has recently changed so don't panic of you can't find it!

Step 4:

Save the changes by clicking "Save" and exiting the CSS editor.  

Congratulations!

You have successfully added smooth scroll functionality to your Squarespace website. Test it out by clicking on any anchor link within your site. 

And there we have it! 

Smooth scroll and anchor links are powerful tools for improving the user experience on your Squarespace website. By implementing smooth scroll, you create a more engaging and visually pleasing browsing experience, while anchor links simplify navigation and allow visitors to jump directly to specific sections of your site. Experiment with these features, inject your unique style, and watch as your website wows! Happy scrolling!

Remember to stay connected with Squarebase for more friendly, easy-to-follow content and tutorials to elevate your Squarespace website!