Jump to content

Squarespace 7.1 - Anchor Links - Solutions and Problems

Recommended Posts

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 by jy15
Link to comment
  • 2 weeks later...
  • 2 weeks later...
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.

Link to comment
  • 2 months later...

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!

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.