Jump to content
  • 0

Links to page sections (anchor links) not working (7.1)

Question

Site URL: https://www.edibleaudio.co.za/

Hi, I am using the page section code to create anchor links but it doesn't seem to be working.

I am adding the following text (for example) to the link field:

#page-section-627a245add445f6d5442c552

I've also tried to test the links with the live site but still no luck.

I'd rather not use the code blocks for anchor links, so any suggestions to make this page section method work? Thanks

Screenshot 2022-06-01 at 11.26.07.png

Link to comment

8 answers to this question

Recommended Posts

  • 0
Posted (edited)

Hi @MaryPhilip_, thanks! The PW is edibleaudio.

The page section links that I've added to the main menu navigation seem to be working sometimes and then other times not. I've linked them like this:

Work:

#page-section-6279144f0f52c84f049815b5

 

Services:

#page-section-627918829a1b556d02b989af

 

Clients:

#page-section-627a245add445f6d5442c552

 

Highlights / Projects:

#page-section-627a47f4ec417e140a2b0dcc

 

Team:

#page-section-627a521938112419ee07c47a

 

Awards:

#page-section-627a579d7011cc1afd17ab7d

 

Contact:

#page-section-629732253e0fa0009adf7653

Edited by michael-van-rooyen
Link to comment
  • 0
Posted (edited)

Take out the page-section and it should work. 

Working here 👍

https://www.edibleaudio.co.za/#627a245add445f6d5442c552

You may want to offset for the fixed header. This article will help 🙂

https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header

Edited by MaryPhilip_

Hi 👋 I'm a Squarespace Expert Member, Circle Member & only Squarespace Authorised Trainer in Scotland. Check out my portfolio at Mary Philip.

Hit the little 👍 if I've helped.

Link to comment
  • 0
Posted (edited)

Thanks again! It seemed like it was working and now it doesn't seem to be working. Is this new way of creating anchor links a bit buggy?

I changed the header to a Fixed Position (Basic). The article you shared is a bit over my head. But I know what you mean regarding the offset. When the links do work, the sections don't line up nicely (it puts the content right up against the top of the window).

Do you have any further suggestions?

Edited by michael-van-rooyen
Link to comment
  • 0
30 minutes ago, michael-van-rooyen said:

I am using the page section code to create anchor links but it doesn't seem to be working. I am adding the following text (for example) to the link field: #page-section-627a245add445f6d5442c552

For anchor links, you need to use something called an HTML ID attribute to specify the element that you want to "jump" to. An ID will typically look like this:

id="page-section-627a245add445f6d5442c552"

However, you are on Squarespace 7.1 and on this newer version of Squarespace page sections don't have an HTML ID attribute like this. Instead, Squarespace are using something called an HTML5 data attribute that looks something like this:

data-section-id="627a245add445f6d5442c552"

These are totally different 😮 and cannot be used in anchor links, so you'll therefore need to use an alternative ID. If the section supports it, you can add a Code Block to manually add an ID and then use this instead. It's a common question so there's a support article that explains how to do this here: Creating anchor links.

 

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
2 hours ago, michael-van-rooyen said:

is there an "alternative ID" I can use?

Yes, but bear in mind that they may be in different positions within a section. For example, the items-list in the Services section inherits the ID of the section:

image.thumb.png.50c5bd0df9481f34e724c273277a33fa.png

You should therefore be able to use this to reach the Services section:
https://www.edibleaudio.co.za/#627918829a1b556d02b989af

I hope this helps.

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.