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

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

Hi @michael-van-rooyen,

Can you provide the password so that we can test it?

Thanks!

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

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

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?

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  ⬇️

Thanks @paul2009! Many of the sections I'm trying to link to don't support Code Blocks (like Galleries and Lists). So is there an "alternative ID" I can use?

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:

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

I hope this helps.

Thanks, that's the same section ID I was using but I didn't include the URL – just # followed by the ID code. I'll give it a try.

On 6/1/2022 at 6:25 AM, paul2009 said:

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  ⬇️

@paul2009, regarding linking to sections: do you know of a way in Fluid Engine (preferably with CSS but js is ok) to offset an anchor link within a section and force it to stick to the beginning of its section, regardless of the browser window's size? I have tried many techniques to offset the position of the anchor link, but its position changes relative  to the size of the browser window.

To explain what I'm trying to create:

1. I have a page with multiple sections, and each section has its own full screen background image.
2. In each section I have a button to link to the section below it.
3. I've set anchor divs in each section, but I want the link to scroll to the beginning of the section itself—the beginning of the background image— and not the location of the anchor.
4. As mentioned, I've tried to finesse the offset with CSS for various screen sizes, but it doesn't look right. Seems crazy that there isn't this capability.

Any ideas? Is it possible? I can give the site and password if you wish to take a look.

In any case, THANKS!

On 2/7/2023 at 7:22 PM, watts-creative said:

@paul2009, regarding linking to sections: do you know of a way in Fluid Engine (preferably with CSS but js is ok) to offset an anchor link within a section and force it to stick to the beginning of its section, regardless of the browser window's size? I have tried many techniques to offset the position of the anchor link, but its position changes relative  to the size of the browser window.

To explain what I'm trying to create:

1. I have a page with multiple sections, and each section has its own full screen background image.
2. In each section I have a button to link to the section below it.
3. I've set anchor divs in each section, but I want the link to scroll to the beginning of the section itself—the beginning of the background image— and not the location of the anchor.
4. As mentioned, I've tried to finesse the offset with CSS for various screen sizes, but it doesn't look right. Seems crazy that there isn't this capability.

Any ideas? Is it possible? I can give the site and password if you wish to take a look.

In any case, THANKS!

This is exactly what I am wondering.