Adding anchor links in 7.1

Hey everyone! 

We are building a site in 7.1 and are not sure how to add anchor links like we are used to in 7.0, does anyone have a solution to this? We want to link a bit of text up at the top of our homepage to a section towards the bottom of our homepage.

Thanks!

Do you have  a link to the site/page?

Hey @colin.irwin! It isn't live yet, sorry. We are just looking to take a few words "Who Are Our Clients" and create a link so that when someone clicks that, the site scrolls down to the Our Clients section on the homepage. 

It doesn't have to be live. You can create password access for trial sites - https://support.squarespace.com/hc/en-us/articles/205810548-Accessing-and-sharing-a-trial

yes, sorry! We know how to do that, my mind wasn't working 🙂 I will send you a password in a chat if that is okay? 

OK

As discussed in chat, you need to find an id somewhere on the page and create a link to it. 

The id=page-section* tags seem to be the best for jumping to a full section. 

So, for instance,  your link would point to #page-section-5db1525905df981438a2f2ed

I currently am experiencing the same problem. @colin.irwin how can I add anchor links in v7.1 of SS?

Another way to set anchor links:

1. Set a code block above the point on the site you want to jump at (e.g. above a Headline, …).
2. Fill the code block with an empty div: <div id="your-anchor-name"></div>
3. Then set the link to jump to the anchor like this: /pagename/#your-anchor-link

Hope that helps

On 12/9/2019 at 12:08 PM, ulf.kollross said:

Another way to set anchor links:

1. Set a code block above the point on the site you want to jump at (e.g. above a Headline, …).
2. Fill the code block with an empty div: <div id="your-anchor-name"></div>
3. Then set the link to jump to the anchor like this: /pagename/#your-anchor-link

Hope that helps

That doesn't work in 7.1 yet.

What will happen with this code / solution is when you click the link it will load the section but it won't scroll down to it.

Robino is exactly right. Unlike with 7.0 where anchor links scroll smoothly to the next section in say, an index page, 7.1 loads the target section. Apparently it's modular containers are fused together in a new way that creates an undesirable 'page load' effect when targeting sections with anchors vs smooth scrolling to it like 7.0. Not ideal.

I've tried a few tricks but nothing has worked yet. Will post if anything changes. Hopefully their engineers can figure out how to allow for smooth anchor scrolling the way we are all used to implementing it.

On 1/28/2020 at 5:55 PM, christiansparrow said:

Robino is exactly right. Unlike with 7.0 where anchor links scroll smoothly to the next section in say, an index page, 7.1 loads the target section. Apparently it's modular containers are fused together in a new way that creates an undesirable 'page load' effect when targeting sections with anchors vs smooth scrolling to it like 7.0. Not ideal.

I've tried a few tricks but nothing has worked yet. Will post if anything changes. Hopefully their engineers can figure out how to allow for smooth anchor scrolling the way we are all used to implementing it.

Hi Christian - I found a way to make smooth scrolling work on my 7.1 website. It's still in construction and can't share but here' s how I achived it.

This works in all browsers including mobile.

------------------------------------------------------------------------------------------------------------

1. Insert this code in the HEADER CODE 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>

2. Insert this code in CUSTOM CSS

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

3. Create your anchor links.

You will need to get the  PAGE SECTION ID for the section you would want to anchor to. It looks like this: #page-section-5e2799dfc3035b3cf9e9c4d6

I have a hard time finding those IDs so what I do is right-click and inspect the section I want to anchor to and I do a search in the console and type: ID. Then you should be able to easily find all the page IDs.

Once you have your page ID, you can create text links or buttons, whatever links you want and just put the # sign before the ID so it looks like this:  

#page-section-5e2799dfc3035b3cf9e9c4d6

That's it - smooth scrolling in all browsers and mobile. Note that in Chrome it will smooth scroll to a CODE BLOCK when using regular CODE block DIV IDs but it won't work in SAFARI / iPHONEs Mobile. Only the #page-sectionIDs work in all browsers.

7 hours ago, Robino said:

Hi Christian - I found a way to make smooth scrolling work on my 7.1 website. It's still in construction and can't share but here' s how I achived it.

This works in all browsers including mobile.

------------------------------------------------------------------------------------------------------------

1. Insert this code in the HEADER CODE 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>

2. Insert this code in CUSTOM CSS

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

3. Create your anchor links.

You will need to get the  PAGE SECTION ID for the section you would want to anchor to. It looks like this: #page-section-5e2799dfc3035b3cf9e9c4d6

I have a hard time finding those IDs so what I do is right-click and inspect the section I want to anchor to and I do a search in the console and type: ID. Then you should be able to easily find all the page IDs.

Once you have your page ID, you can create text links or buttons, whatever links you want and just put the # sign before the ID so it looks like this:  

#page-section-5e2799dfc3035b3cf9e9c4d6

That's it - smooth scrolling in all browsers and mobile. Note that in Chrome it will smooth scroll to a CODE BLOCK when using regular CODE block DIV IDs but it won't work in SAFARI / iPHONEs Mobile. Only the #page-sectionIDs work in all browsers.

Just tried your suggestion on my site Robino but am still not achieving any smooth scroll effect - still getting the same issue where I click one of my anchor links and while I am moved to the correct section of the page the site gives the appearance as if it had directed me to a new page - no scrolling at all.  (Also using SS 7.1)

Any other suggestions for achieving the scrolling effect for anchor links?

Here's how I did it:


1. Name and enter your link:
ex: #about

2. Add your anchor:
code block:

<p id="about"></p>

3. Smooth our scroll:
Open custom css and add:
html {
  scroll-behavior: smooth;
}

Site is still private for a client but I can link to it as proof once it's live.

12 hours ago, rapgamestevejobs said:

Here's how I did it:


1. Name and enter your link:
ex: #about

2. Add your anchor:
code block:

<p id="about"></p>

3. Smooth our scroll:
Open custom css and add:
html {
  scroll-behavior: smooth;
}

Site is still private for a client but I can link to it as proof once it's live.

Yes. This will work (y) 

Hi there   @rapgamestevejobs and @tuanphan , My apologies as I am new to squarespace but I have been designing websites for quite a while (like 10 years). Being said in 7.1 version seems not to work, first of all there is no "code" block (as far I have seen) second, when you add the link to the navigation (pages) by using /#anchor-name it won't scroll not even when using that CSS parameter you wrote.

So I wonder how come you make it work? Are you sure you are using 7.1? the only way to do it was to use JS but the problem is that in mobile the mobile menu won't hide, and while I was trying to make it hide then I messed up something with the function that triggers the menu from the hamburger icon.

Now, it shouldn't be that complicated right? for something as simple as an anchor link. You can do the same with no hassle with webflow, so how come we have this problem with the latest version then?

Any support here that can help?

Hey @studiolinear
 
This is how I've solved it on one of my client sites (you can check out the WIP with the below details) 

URL: tommy-laurence-new.squarespace.com
P: tommyl

I'm setting the anchor point using code injection blocks with the following - 
 

<p id="about"></p>

( @EduProduct, you can insert a code block into your page content using the "Code" item as below) - 




For the links, I'm then setting up links in the nav as follows - 

/home#about


And then in the code injection, this is the code I'm using to set up the smooth scrolling on the anchor links - 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

 
   // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {


      // Store hash
      var hash = this.hash;
      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

Hope that helps!
 

On 3/4/2020 at 6:37 PM, rapgamestevejobs said:

Here's how I did it:


1. Name and enter your link:
ex: #about

2. Add your anchor:
code block:

<p id="about"></p>

3. Smooth our scroll:
Open custom css and add:
html {
  scroll-behavior: smooth;
}

Site is still private for a client but I can link to it as proof once it's live.

This worked well for me, thanks very much!

Works great! Thank you very much!

We have a really simple add-on for anchor linking in 7.1 -- https://www.squareaddons.com/shop-2/anchor-linking

On 3/4/2020 at 6:37 PM, rapgamestevejobs said:

Here's how I did it:


1. Name and enter your link:
ex: #about

2. Add your anchor:
code block:

<p id="about"></p>

3. Smooth our scroll:
Open custom css and add:
html {
  scroll-behavior: smooth;
}

Site is still private for a client but I can link to it as proof once it's live.

can anyone clarify the step 1? Im not quite sure where to include that information. Steps 2 & 3 I understand. I am trying to have the items in the navigation anchor to different sections of the site. 

On 3/4/2020 at 9:37 PM, rapgamestevejobs said:

Here's how I did it:


1. Name and enter your link:
ex: #about

2. Add your anchor:
code block:

<p id="about"></p>

3. Smooth our scroll:
Open custom css and add:
html {
  scroll-behavior: smooth;
}

Site is still private for a client but I can link to it as proof once it's live.

Why is this not working on Safari for me (the smooth scroll)? Anyone know? Works great on Chrome.

On 3/24/2020 at 10:24 AM, Kate said:

We have a really simple add-on for anchor linking in 7.1 -- https://www.squareaddons.com/shop-2/anchor-linking

I just bought that ... and it worked in 7.1! Thank you ...

It was easy too.

I am having trouble with this as well. The link and smooth scroll work fine but when I refresh the page, it automatically jumps to the anchor link without having to press the anchor button. Any ideas?

Anchor links are tricky with 7.1! We've fixed the issue with an add-on that will keep things simple for you: https://www.squareaddons.com/shop-2/anchor-linking