Creating same-page links in Squarespace

Ever wish you could just have a link to a different section on the same page? If ya click on it, it automatically scrolls to that spot for you. Fast, easy, smooth, –modern. Yeah!

This one can be a bit sneaky! It’s not hard to set up, but it’s also not obvious how.

I’ll walk you through how to set this up within a Brine template in 7.0, code-free, AND in 7.1 with code, but it’s super simple & I’ll give ya the cut-and-paste code snippet so you can run with it easily.

What is an Index page anyway? It’s just a page-structure style.

It helps break up the content into more digestible, bite-size pieces. The only reason to use one is for page types that typically have a lot of content, such as home pages or sales pages. A contact page, for example, shouldn’t need to be an Index page.

Index pages aren’t for traditional ‘indexes,’ though I suppose they could be.

You also don’t have to use an Index page at all if you don’t want to. It’s purely a style & strategic-layout thing.

Want to know more about creating Index pages in Squarespace? Read Squarespace’s tutorial about adding an Index here.

Brine Family Templates: Using the built-in navigation

AKA: THE CODE-FREE OPTION

In 7.0, the templates that allow Index pages (Brine family included), also have individual URLs for each of the sections inside that index.

You could easily have 10 different sections in a sales page, or even a homepage, depending on how much you decide to break up your content within the index.

If you go into the Page Settings (click the gear ⚙️ wheel for each page inside the index) and change the page title (shown on the browser tab), navigation title (what they see in their navigation button list), and the URL slug to make sense for that section. Save.

Here’s what that looks like, if you’re needing a visual:

Where to find your page settings & section URLS inside Squarespace Index pages.

Once you’ve made everything clear & easy for the viewers to understand, then go into your Design area, from the main menu, then go into your Site Styles.

There are 3 main Index-Navigation related things you can adjust inside Site Styles for any of the Brine Family templates:

  • 1st — what style of navigation do you want? Radio dots? Filled or outlined dots? Lines? Vertical or Horizontal lines? Etc.
what type of navigation

2nd — after you’ve chosen the style of the navigation you want, keep an eye on the preview side so you can see how it will look, then style it in the “Index: Navigation” section of your Site Styles. Choose the fonts & colors, overlay options, etc.

style of navigation

3rd — scroll a little further down in your Site Styles, & you’ll see this “Index: Scroll Indicator” option. This is the icon that shows up in the bottom area of the 1st section (only), telling the viewer there’s more down below if they begin scrolling. Choose the indicator type, color, etc. in this section.

whether you want a scroll indicator in the top section

Code for inserting your own same-page navigation links

SQUARESPACE v7.0

For this part, it’s truly pretty simple.

Basically, you add a Code Block with a single line of code in it, at the start of each section you want to be able to jump TO. Then you link a button or text above that, to that section by typing the # symbol before the slug you put in the code.

I know, that may sound a little murky if you’re unfamiliar with any coding at all, so let’s dive in.

1st we’ll create all the anchor code. This tells the browser where in the hell –erm, code– it’ll jump to on the page. It’s basically a very specific bookmark (anchor) in the code that a link can find easily.

(No, this doesn’t interfere with other links on the page, and it doesn’t work for links off of this page, either. This method only works for same-page jumps.)

Add a Code Block to the beginning of the first section you’d like to be able to jump to.

If you need an example, let’s say on your Sales page you have all this content, but maybe you want a button that jumps to the pricing area of that page. You’d add a Code Block to the top of the Pricing area of that Index. It won’t show up in the design, so no one will know it’s there but you!

Here’s the copy-and-paste code:

<div ID="example"></div>

Copy & paste that into a Code Block you just added.

Then replace “example” with whatever brief description makes sense for each section.

So if you wanted to jump back to the pricing section of your sales page, then replace “example” with “price” or something very simple. It will have to be EXACT in both the code & the link, so the simpler the better!

Now your code should look like this, with your word in it, instead of “example.”

<div ID="price"></div>

Apply the changes to that Code Block.

Okay, so now you have the digital ‘bookmark’ on the page!

Go back up to the area where you want the link to that section.

Add a button or link some text to #example — or in our example, it’d be #price.

how to link the button to the code

Click Apply. Now Save the changes on that whole page.

And test it! See if it works. Click the linked text or button (whichever you did) and see if it jumps to that spot on the page, where you inserted the Code Block.

If it isn’t working, go back & check what you typed in both places, and make sure that word matches EXACTLY, capitalization & everything.

If it still isn’t working, check this Squarespace tutorial. I know the Pacific template has an extra thing to add to the link.

Now repeat the process for every jump you want on the same page.

Don’t worry, it’ll seem more simple & familiar the more you do it. 😉

SQUARESPACE v7.1

Remember, 7.1 templates don’t actually have Index pages, because you can create an index style page anywhere just by adding new sections with the ➕ icon while you’re in edit mode.

Because there are no individual section pages with their own URLs, you’ll need to use code to tell the browser where on the page you want it to jump. It will work just like with the Brine Family templates example above.

The code is still:

<div ID="example"></div>

So you can follow the tutorial above for 7.0, exactly.

See it in action! (Quicker than you think!)

Affordable websites you can launch quick!

CHECK OUT THE TEMPLATES

Katelyn Dekle is the founder of Launch The Damn Thing (formerly Studio 1862), specializing in designing Squarespace Websites for female entrepreneurs or micro-businesses who want the power & freedom that come with being able to edit a professionally designed website. Katelyn’s focus is on empowering businesses & helping them maintain their online homes in a much more manageable, modern, and efficient way.

Katelyn is a Squarespace Circle Member, an Asana Together Ambassador, an AIGA member, and a member of the Creative Lady Directory, and Rising Tide Society.

--

--

--

Designer & Founder of Launch the Damn Thing; specializes in designing Squarespace websites for female entrepreneurs & microbusiness owners.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Hackathon Results and August News

Screenshots of Customer Counter

Website Critique for AcneDocs

Advantages of 3D Metal Printing

Fine Art Infusion

Needfinding for Airport Design: how can we enhance people’s airport experience?

How To Fix BLU Pure View Not Charging [Troubleshooting Guide]

Finding Greener Pastures

Basecamp First Impressions

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Katelyn Dekle

Katelyn Dekle

Designer & Founder of Launch the Damn Thing; specializes in designing Squarespace websites for female entrepreneurs & microbusiness owners.

More from Medium

Best Practices for Instagram: Lilly Pulitzer

I Took an Utterly Useless Pet Project To the Next Level

10 Highly Effective Tips to get Clicks on your Banner Ad!

Get wayyyy more value out of the designer you just hired.