Prefer to watch?

Here’s the step-by-step video!

MENTioned in the video:

Copy-and-paste code snippets from today’s tutorial…

CODE TO CREATE ANCHOR LINK

<a name=”section-name-goes-here></a>

SMOOTH SCROLLING CSS

html { scroll-behavior: smooth;}

Example anchor link

paigebrunton.com/home#section-name-goes-here

Rather read than watch?

Here are those steps written down…

Long-scrolling pages have been the trend for quite some time now, and they are a great way to keep visitors engaged and spending more time on your site!

But what about when you want visitors to be able to skip the scroll, and be taken straight to a specific section on the page instead?

(With just one click!)

This is where jump-to links or “anchor links” come in, and I’m going to take you through step-by-step how to set those up in this video.

By the way, this tutorial covers creating your jump-to links in Squarespace 7.1, but if you’re looking for help with Squarespace 7.0, I have a post on how to achieve the same effect here.

What you’ll learn…

So let’s quickly chat about what it is we are creating…

Say I’m an interior designer, and I have a long scrolling page on my website where I showcase all my portfolio categories (residential, commercial, etc.) for visitors to be able to scroll through and see samples of what I offer.

Now say I want a way for visitors to skip straight to their preferred category on the page!

I might decide to create a little faux secondary navigation at the top of my portfolio page using a simple text block, and then link each category to its matching section.

These ‘jump-to’ links are what we will be creating in today’s tutorial!

(And I’ll also show you how to create a smooth-scrolling affect when jumping to your section, since on it’s own it’s a bit abrupt!)

Step 1:

Using code blocks to name each section of the page

So the first thing we need to do is go in and name each of our sections on the page we want to create a link for.

To do this, we just scroll down to where the section starts on your page, and add in a code block to that section.

Heads up! Depending on the layout of your content, you may actually need to add your code block to the section above to get the page-jump to land in just the right spot.

Then, copy & paste this little snippet of code into your code block, changing the section name to whatever you want:

<a name=”section-name-goes-here“></a>

I’ll call mine “commercial.” So that would look like this…

<a name=”commercial“></a>

Now don’t worry, your code block text will not be visible to your visitors.

But if you aren’t loving the extra bit of blank space created by adding a new block to your section, then try dragging and dropping your code block beside something else in your section so it’s not on it’s own row!

Do this for every section of your page you want to be able to link to.

Step 2:

Link to your newly named section using an anchor link

So if I wanted to link my little faux secondary navigation I created using a text block, then I would just highlight the name of the section, and start creating a link as usual.

But instead of putting in some sort of URL, I’m actually just going to put in a hashtag, followed by the name of my section.

So since I’m trying to link to my commercial section I just finished naming, I’ll just stick in #commercial.

Pro-tip: If the section your linking to is on the same page as your link or button, you will want to make it so that the link is not opening in a new browser!

But what if you need to use your jump-to link externally, say on social media?

You’ll first have to put your domain, followed by the page’s url slug, and then the # and name.

So if I was trying to link to my commercial work section from somewhere off of my website (A.K.A externally), my link would need to look like this:

mybusiness.com/work#commercial

That’s it!

You may need to refresh the page, but now, when clicked, your link should lead straight to its matching section.

But again, the jumping effect isn’t exactly smooth, so for our third and final step, we have to go in and add a bit of CSS to tell those links how to behave.

Step 3:

Add smooth scrolling effect to anchor link using CSS

So for step 3 we actually have to head under our design panel and open up our Custom CSS editor.

Then, all you are going to do is copy and paste in this bit of code.

html { scroll-behavior: smooth;}

And viola!

Hit save, refresh the page, and use the arrow in the top right corner to preview in full page mode.

Check out that smooth scrolling action!

There are endless ways you can use this hack once you know how to do it, so get creative!


/


/


You’ll Also Love…

Squarespace hack: how to create jump-to links in version 7.1