Squarespace 7.1 - Anchor Links - Solutions and Problems

Hello, I have spent a good amount of time digging through multiple threads/forums regarding anchor links in 7.1 sites and wanted to summarize what I have working, and what issues I am seeing.

RedBarrelCreative.com

My setup:

Currently I am using code inject blocks to create div tags for header site navigation anchor links.

Example:

<div id="about" class="anchor-offset-about"></div>

 

Header nav links are written as follows:

/home#about

 

The class is so I can create a manual offset for both desktop and mobile jumps to display in the exact spot I want.

Example:

//desktop//

.anchor-offset-about {
  position: relative;
  top:0px;
}

//mobile//

@media(max-width:767px) {
  .anchor-offset-about {
    position: relative;
    top:100px;
  }
}

 

Smoothing scrolling is enabled via:

html {
  --scroll-behavior: smooth;
  scroll-behavior: smooth;
}

 

Smooth scrolling on Safari specifically is enabled via:

(site-wide header injection)

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

<script src="https://unpkg.com/smoothscroll-polyfill/dist/smoothscroll.min.js"></script>
<script src="https://unpkg.com/smoothscroll-anchor-polyfill"></script>

--

This setup IS WORKING correctly. HOWEVER, I am running into some weird glitches across different viewing formats.

1. Chrome - Everything is working properly. Aside from the random anchor link not landing exactly correctly (very rare) this all works.

2. Safari

     -Upon landing on the home page for the first time, every anchor link appears to force a page refresh and jump to the anchor point without smooth scrolling. After this completes, anchor links will work properly and smooth scroll between them. I am still looking for a solution to this. There are the two options I have tried without success.

            1. Force the home page to load at #top. This is not a viable solution, however, as it will work on the very first page load/visit. But if I visit another page on my site that is not the home page, and try to return to one of my anchor links from the header navigation it will force a page load to the top again and not jump to the correct location.

            2. Purchased squareaddons.com Anchor Links product. This will solve the problem on desktop, however, I am unable to set class specific adjustments, so anchor link jumps do not land correctly on mobile. I have submitted a ticket to them to ask about this.

3. Mobile (Safari and Chrome on iOS - both iPhone and iPad)

        -Similar to above, page refresh occurs on first click of any header nav link after landing on home page. Scrolling will work after this. The main other problem on mobile only is that my site header, which is both fixed and using the "dynamic" setting in Squarespace 7.1 is not loading properly when using any anchor link for the first time. It jumps to the right location, but is transparent, showing content underneath where it should be a solid color (white in my case). If I start scrolling or click the anchor link again it will display properly, but makes for a very messy first-time viewing experience.

 

And advice or solutions to these issues would be greatly appreciated. Thank you!

Edited May 9, 2022 by jy15

Did you find a solution to this? I'm having the same issue in chrome. Safari/mobile works fine though.

I have not yet unfortunately. So you're able to get smooth scrolling anchor links in Safari without forcing a page refresh?

This setup above is working for me in Chrome - weird.

Sometimes I have found solutions for Safari by adding "div" in front of the class name in CSS. Hopefully this is an easy fix for ya 

div.anchor-offset-about {
  position: relative;
  top:0px;
}

 

On 2/14/2022 at 10:48 AM, nosremetnarg said:

Sometimes I have found solutions for Safari by adding "div" in front of the class name in CSS. Hopefully this is an easy fix for ya 

div.anchor-offset-about {
  position: relative;
  top:0px;
}

 

Unfortunately no luck, still seeing the same issue.

The simplest solution I've found to this is to use code blocks as @jy15 stated with corresponding links in the nav, like on my site: https://www.martinferrinidesign.com/

Markup/CSS is:

<!-- Place html like this into code blocks into the section you want the nav items to scroll to -->
<a class="anchor" id="services"></a>

<!-- Links in nav get /#services and so on as their URL -->

.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}

/* -- Place this near the top of the Custom CSS area -- */
html {
  --scroll-behavior: smooth;
  scroll-behavior: smooth;
}

Then if you need to adjust certain anchors to have more of an offset simply add more CSS, like:

#services {top: -250px;}

This works in Safari and mobile as well. And in situations where there's nowhere to add a code block like in 7.1  auto-layout sections (like 'People' for example) you can either create a section above the one you want the nav to scroll to and place a code block into it and use the section id to remove padding and even set the height to 1px so that the offset will work, but the section it's in won't take up extra space, in CSS like:

[data-section-id="626af404c5414a740afc03bd"] .content-wrapper {
	padding: 0 !important;
	max-height: 1px !important;
}

Lastly, if that's not optimal you can use javascript in the Code Injection area to inject, or prepend (or append) html into anywhere in your site, typically right on or above the div you'd like to be in the viewport when the anchor link is clicked/tapped like:

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// Prepend anchor to section
$('[data-section-id="626af404c5414a740afc03bd"] .content').prepend('<a class="anchor" id="services"></a>');
</script>

Hope this is helpful!

@jy15

I had the same issue on my website, but turns out I didn't implement the class properly. 

I just did and it works great for me. I read your post and you seem to do it right too. Maybe squarespace rolled out an update?

For me it works well now on desktop : chrome and safari and on the iphone: chrome and safari

My anchor code:

<b> 
<p2 id="air" class="anchor-link">HOW FRENCH HAS BENEFITED ME 
</p2> 
</b>

then #air on the text I want to link to this section, 

my custom CSS:

html {
scroll-behavior: smooth;
}
.anchor-link{
  scroll-margin: 50px;
}

 

Check it out at www.joshuabalata.com/french

 

Hey! Did you ever figure this out? I'm having the same issue on my site.

Thanks, I finally found a solution for my local links. Your code worked flawlessly. 

The other parts concerning the css for displaying spot for the jumps and the css and (javascript?) for smooth scrolling should be placed in the header section, I guess, but my Squarespace 7.1 plan doesn't allow that.

Is my guess right? If so, is there any workaround?

Please be "beginner friendly" lol. I am very raw.  

Thanks in advance.    

On 1/19/2024 at 10:18 PM, Soneghet said:

Thanks, I finally found a solution for my local links. Your code worked flawlessly. 

The other parts concerning the css for displaying spot for the jumps and the css and (javascript?) for smooth scrolling should be placed in the header section, I guess, but my Squarespace 7.1 plan doesn't allow that.

Is my guess right? If so, is there any workaround?

Please be "beginner friendly" lol. I am very raw.  

Thanks in advance.    

You try adding it via Markdown Block in Site Footer

I'll do it. 

Thanks.