link How to jump to a secion using it's #ID on Squarespace 7.1?

Site URL: https://theremotejobcoach.com/

Hi! I am trying to create anchor clicks for visitor to jump on to the sections but i can't seem to find the #id as they keep on changing.
Page link:
https://theremotejobcoach.com/remote-job-seekers-new-copy
data-section-id:
630e813c6d61be75c565581c
Link i am trying:
https://theremotejobcoach.com/remote-job-seekers-new-copy#page-section-630e813c6d61be75c565581c

TIA

You'll want to add a code or markdown block with a custom ID rather than trying to link to block IDs. Like this:

<span id="YOUR-ID"></span>

and then link to:

#YOUR-ID

You may also want to add this to your Custom CSS to improve the behaviour of the scroll:

html {
  scroll-behavior: smooth;
}

This guide is a good: https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links

I have similar questions and problems I'm trying to troubleshoot in Fluid Engine:

1. Is there any way to link to a page's section[data-section-id="###"] selector?
   1. I suppose this is analogous to linking to page-section-id as one used to be able to do previous to 7.1.
2. If not, is there a way (preferably with CSS) to force an anchor link within a section to stick absolutely to the beginning of its section, regardless of the browser window's size? That way, when you link to it, it will always scroll to the beginning of that section.
   1. 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 the first section I have a button to link to the section below it. That section has a button to link to the section below it, and so on.
3. I've set anchor divs in each section, but now it scrolls down to wherever the link is on the page, and I want it to scroll to the very beginning of the section.
4. I've tried to finesse it for various screen sizes, but it doesn't look right. In any case I'd like it to ALWAYS scroll to the beginning of the section regardless, as stated before.

Anyone with any ideas? I can give the site and password if someone wishes to take a look.

In any case, THANKS!

14 minutes ago, watts-creative said:

Is there any way to link to a page's section[data-section-id="###"] selector?

No. URI fragments only work with id or name attributes. In the context of SS you can't use dynamic ids. Non dynamic ids generally begin with block- or other similar identifiers. If the id begins with yui_ it is dynamic.

I don't have any other answers to your questions at this time.

@watts-creative I was looking for something else to fix and saw you were looking for this sort of thing, so I'll add a couple of bits here for you to think about

Do it with Code

I know you said you'd prefer CSS, but newsflash is that it's easy in js and harder (but potentially not impossible) in css. Here's what I'd do: write a utility script that you stick in the footer injection of your site (or a code block in the footer) which creates the anchors and positions them at the top of each section. 

document.querySelectorAll("article>section").forEach(function(s) {
	const a = document.createElement("a");
  	a.setAttribute("id","section-link-"+s.getAttribute("data-section-id"));
  	a.setAttribute("style", "position:absolute;top:0;left:0;z-index:-1'");
    s.prepend(a);
})

must be in the footer so that the sections are in the document when you run the script (or put it in the header as an event handler after the DOM content as loaded).

Now you can just use standard links like #section-link-139408129035 to jump to each one. Add in the scroll-behavior:smooth thing referenced above to make it smooooooth.

Do it with CSS (please don't! do it with code!)

I strongly advise you only read on for educational purposes. this is tough. I'm mostly doing this for my own amusement and to try to understand the fluid engine implementation a bit better. OK, here's the deal. you can put your anchors in a fluid engine block, e.g. in a code block. you can also make them positioned absolute, but they will be positioned relatively to the first parent it finds that is positioned "relative". that doesn't get you very far. we've got a couple of options.

• break squarespaces positioning to let us go higher up the parent hierarchy (hacky AF!)
• set a negative margin on our absolutely positioned anchor to move it to the top of the section (difficult!)

the assumption here is that you have a code block in your fluid engine which contains an anchor element that's been given a class of "jumplink".

hacky AF version:

/* this probably breaks some stuff! it gets turned off when editing */
body:not(.sqs-is-page-editing) div.content-wrapper, 
body:not(.sqs-is-page-editing) div[data-fluid-engine=true], 
body:not(.sqs-is-page-editing) .fluid-engine { 
  position:unset !important; 
}

/* unset your code block too! less worried about this */
body:not(.sqs-is-page-editing) .sqs-block-code {
    position:unset !important; 
}

/* move your link to the top */
a.jumplink {
  position:absolute;
  top:0;
}

negative margin version:

The issue here is probably what you've found already. the sections top padding and height moves around a lot as the browser changes its viewport size. This means that you've got to set your padding in relative terms, and with the same rules as Squarespace use to set section top-padding (23 of them...). You've also got to factor in that if your section's content is smaller than the minimum height of a section then you've got to use that instead. (and the first section is explictly padded again by the height of the header, which is tough to deal with, but maybe you'll let me off that bit as the first link doesn't matter so much and for that you can just use #top).

So how the **** do we do that?! well we need to know the different paddings and minimum heights that SQS 7.1 use. I _think_ they are standardised, but either way you can check them in the site.css. they are all set using a combination of vh, vw and vmax settings. vmax is particularly interesting as it factors in orientation as well and returns the longer side of the viewport. Squarespace has separate rules depending on whether your section is padding S, M or L, and whether it is aligned top, middle or bottom. there are other rules for first section, manual sizing etc which I'm not going to deal with here, but you could.

We find these values. it would have been super if Squarespace had these in variables cause then the rule would have been easier, but they aren't so you've got to copy all the rules and put the paddings and min-heights into variables at the section.content-wrapper level. you can then create css to set the top position to negative the padding.

But wait!, if the section is too short you need to go to the top of the minimum height. well, to get there we need to know half the minimum height of the container and subtract half the height of the fluid engine block assuming it's vertically aligned in the middle. if it's aligned top we don't need to worry, if it's aligned bottom we need the minimum height of the container and subtract the height of the fluid engine block.

Here we go...

I'm only going to do the rules for a standard medium sized block, but I'll put in the different variables to take account of the three different vertical alignments. the other 20 rules you need are very similar if you really want to go down this route (HINT: don't go down this route! do it in code!)

/* you still need to unset the position of the code block */
.sqs-block-code,
.sqs-block-code .sqs-block-content {
  position:unset !important;
}

.page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--medium>.content-wrapper {
  	--dh-min-height-factor:0.5;
    --dh-fe-height-factor:0.5;
	--dh-top-padding:6.6vmax;
    --dh-min-height: 66vh;
}

.page-section.vertical-alignment--top:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--medium>.content-wrapper {
  	--dh-min-height-factor:0;
    --dh-fe-height-factor:0;
	--dh-top-padding:3vw;
    --dh-min-height: 66vh;
}

.page-section.vertical-alignment--bottom:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--medium>.content-wrapper {
  	--dh-min-height-factor:1;
    --dh-fe-height-factor:1;
	--dh-top-padding: 13.2vmax;
    --dh-btm-padding: 3vw;
    --dh-min-height: 66vh;
}

now that I've put in my variables, I can create a css calc at the a.jumplink level and that will fill in the variables accordingly. interestingly, Squarespace's custom css is actually a sass precompiler and it doesn't like all the possible css functions, however, you can just put this in a code block, or the header injection:

a.jumplink {
position:absolute;
display:block;
top: calc(-1 * max(
            calc(
              var(--dh-min-height-factor) * var(--dh-min-height) 
              - var(--dh-fe-height-factor) * calc(100% + var(--dh-btm-padding,0px))
            )
            , var(--dh-top-padding))
         ) 
}

so that's

• -1 to make the top padding negative
• either use the distance between the fe block height and the section min height (factored in for the different height factors for vertical alignment - adding in bottom padding when required)
• or use the top padding, whichever is larger

If you got this far.... you might just have to take me on trust that it works.... it does, but you probably shouldn't do this. but I learned something and got to distract my brain for a bit...

@iamdavehart, you are a steely-eyed missile man!

Just read through your whole post—including the Do it with CSS (please don't! do it with code!) section—and once again you explained your methodology perfectly. Do you teach? If you don't, you should.

Going to read through again tomorrow, when I haven't had a couple glasses of wine, but at first glance your js solution sounds perfect. Sadly, the need I had for this that sent me questing for solutions in the first place was ultimately nixed by my client, but I plan to implement this on my personal site, so I thank you for taking the time to distract your brain!!

On 2/21/2023 at 1:10 PM, iamdavehart said:

Do it with Code

I know you said you'd prefer CSS, but newsflash is that it's easy in js and harder (but potentially not impossible) in css. Here's what I'd do: write a utility script that you stick in the footer injection of your site (or a code block in the footer) which creates the anchors and positions them at the top of each section. 

document.querySelectorAll("article>section").forEach(function(s) {
	const a = document.createElement("a");
  	a.setAttribute("id","section-link-"+s.getAttribute("data-section-id"));
  	a.setAttribute("style", "position:absolute;top:0;left:0;z-index:-1'");
    s.prepend(a);
})

must be in the footer so that the sections are in the document when you run the script (or put it in the header as an event handler after the DOM content as loaded).

Now you can just use standard links like #section-link-139408129035 to jump to each one. Add in the scroll-behavior:smooth thing referenced above to make it smooooooth.

Hey @iamdavehart this looks like magic code thanks so much for creating it!

By any chance is there a clever way to rename the links so instead of #section-link-139408129035 it could be #about, #contact, etc?

Thanks again 😊