Adding anchor links in 7.1

I have used the section ID and added in the custom scroll smooth css. However if I scroll to to the top of the page and click the same link again it won't scroll down a second time, like it does in 7.0. Any tips? 

On 3/11/2020 at 5:05 PM, SpeckleDigital said:

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!
 

 

I feel like such a dunce.  How do you add the links/item name to the nav bar? With the various sections built in the same page, do you have to create a dummy page that's empty but has a nav bar name in order for it to appear?

On 2/3/2020 at 4:35 PM, 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.

This worked perfectly for me! Thank you so much! I was hopeless about a solution already. 

Hi guys, i'm trying to do create a link to scroll to a gallery section, but cannot find a 'section id' to link to, only a 'data section id' and this does not work when used in a link. Does anyone have an idea what i'm doing wrong? Thanks! 

I'm completely at my wits' end....I've tried every variation on every forum I can find, and I'm getting a 404 message, or nothing happens at all.  I've used various code injections, and created various links with block ids.  Where is the Squarespace support?????!!!!!!!!

I'm completely at my wits' end....I've tried every variation on every forum I can find, and I'm getting a 404 message, or nothing happens at all.  I've used various code injections, and created various links with block ids.  Where is the Squarespace support?????!!!!!!!!

On 12/9/2019 at 9: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

Yup, this was spot on. It made sense when I read it, tried it and it works perfectly.

I will out line this because some people are in need here.

@khupp I hope you read my instructions, it will help you. If my steps are not clear let me know and I will confirm if you followed the steps correctly. I used the steps below on my 7.1 site and it works.

This couldn't be easier.

1) Select the text that you want to act as an anchor link.

2) Give it a name and prefix it with the # symbol. In my case the link name is #analytics

3) Add a code block directly above the location where you would like the link to scroll to when clicked on

4) In the code block replace the sample code and enter

<div id="analytics"></div>

In summary: I used #analytics and "analytics" respectively but that was for my case. When you apply this to your page, name it according to your own preferences.

NOTE: You may need to test in an incognito window to see it work but it works.

Optional: Code to ensure smooth scrolling

I did add the following as code injection to the header

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

and the following to Custom CSS

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

I took a very brief look and the library is located here: https://github.com/iamdustan/smoothscroll, and the methods and examples that can be enjoyed are behind an insecure http address (http://iamdustan.com/smoothscroll/ - your browser will very likely complain).

I just want to add that this library may not be necessary at all for a smooth scroll to occur but there are some nice options like scroll to top or bottom of a page. I remember using anchor links on a 7.0 site as per steps in a Squarespace support page (search for anchorlinks) and I did not use this library at all. Scrolling remained smooth nonetheless. I recommend trying without the 2 smoothscroll-polyfill scripts and accompanying CSS. I don't believe you will need them.

The solution I outlined here is very generic and should work in 7.0 and 7.1 across multiple devices. Please test it to be sure it works on the devices and browsers you expect visitors will use.

As an FYI, squarespace support has an article that appears to cover this but it goes about it differently. https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links

Cheers
—Alex Santos 

On 1/23/2020 at 6:14 AM, Robino said:

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.

This is not true. I have it working as expected with 7.1. Maybe there was a small mistake on your part?

how to anvhor link categories of blog posts in 7.1?

On 6/19/2020 at 11:19 PM, AlexSantos said:

Yup, this was spot on. It made sense when I read it, tried it and it works perfectly.

I will out line this because some people are in need here.

@khupp I hope you read my instructions, it will help you. If my steps are not clear let me know and I will confirm if you followed the steps correctly. I used the steps below on my 7.1 site and it works.

 

This couldn't be easier.

1) Select the text that you want to act as an anchor link.

2) Give it a name and prefix it with the # symbol. In my case the link name is #analytics

3) Add a code block directly above the location where you would like the link to scroll to when clicked on

4) In the code block replace the sample code and enter

<div id="analytics"></div>

In summary: I used #analytics and "analytics" respectively but that was for my case. When you apply this to your page, name it according to your own preferences.

NOTE: You may need to test in an incognito window to see it work but it works.

 

 

Optional: Code to ensure smooth scrolling

I did add the following as code injection to the header

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

and the following to Custom CSS

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

 

 

I took a very brief look and the library is located here: https://github.com/iamdustan/smoothscroll, and the methods and examples that can be enjoyed are behind an insecure http address (http://iamdustan.com/smoothscroll/ - your browser will very likely complain).

I just want to add that this library may not be necessary at all for a smooth scroll to occur but there are some nice options like scroll to top or bottom of a page. I remember using anchor links on a 7.0 site as per steps in a Squarespace support page (search for anchorlinks) and I did not use this library at all. Scrolling remained smooth nonetheless. I recommend trying without the 2 smoothscroll-polyfill scripts and accompanying CSS. I don't believe you will need them.

The solution I outlined here is very generic and should work in 7.0 and 7.1 across multiple devices. Please test it to be sure it works on the devices and browsers you expect visitors will use.

As an FYI, squarespace support has an article that appears to cover this but it goes about it differently. https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links

Cheers
—Alex Santos 

 

This did not work for me.....in my case, the clickable item is an image.  So, I performed the following:

1.  I selected the text that I want used as the anchor link.

2.  I named the link '#refresh'.

3.  I entered a code block just above the linked text, and entered the following:  <div id="refresh"></div>

4.  For my clickable image, I entered the following as the clickthrough URL:  #refresh

 

@AlexSantos I revised the clickthrough to the page reference PLUS the # and it worked!  Thank you SO much!  

1 hour ago, khupp said:

Optional: Code to ensure smooth scrolling

I did add the following as code injection to the header

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

and the following to Custom CSS

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

@AlexSantos While the mobile anchor links work great, the desktop is taking me to a random spot on the page.....you still have to scroll back up to get to the correct section?

@khupp You can plug-and-play this add-on as well to more easily achieve the anchor linking in 7.1 https://www.squareaddons.com/shop-2/anchor-linking

So this code, I am trying to get a dropdown from the header bar to link to another section of the page, I don't seem to be able to give the dropdown header a name (with the # prefix), has anyone else linked from the header dropdown nav to another page?

On 6/24/2020 at 10:26 PM, khupp said:

 

@AlexSantos While the mobile anchor links work great, the desktop is taking me to a random spot on the page.....you still have to scroll back up to get to the correct section?

 

It's a curious thing, if you go to https://factfiber.squarespace.com, (password is factfiber) and then click on the glossary term "Dependent Variable" to reveal the definition and within click on "outcomes" it will scroll past where it should. I can't for the life of me figure this one anchor link out.

Everything else works. If you want the code for what I have done it's yours, just let me know. Perhaps there is a bug related to Squarespace Mercury I don't know. Every browser, Firefox, Chrome, Safari all behave precisely the same. Only this one link is affected. Everything else works. If you have an answer let me know. 

I've read AJAX can interfere with a lot of Anchors, so stopping them working (in Brine template anyway).

All SS give you as advice, is to turn AJAX off.

Does anyone know how to get anchors working even when AJAX is enabled?

I found this snippet of code, but it doesn't seem to work for me...

Quote

function scrollToURLAnchor(){
setTimeout(function(){
if(window.location.hash){

$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 500,  function () {

});
}
}, 500);
}

Thanks

On 3/5/2020 at 2:37 AM, 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.

Brilliant and thank you!!!

Free anchor link plug in available below.

Tested on numerous 7.1 sites.

*NOT* compatible with fixed headers, but it can be made to work, I just haven't finalized it yet.

On 2/3/2020 at 2:35 PM, 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.

Hi Robino, this works great for scrolling to same-page sections! My issue is when I want to jump to that section from a different page, it glitches and jumps me further down the page. Any idea why this is?

@DVC-Billy Post a link to your page.

If its missing just a little bit, its due to the fact that squarespace changes the height of the header after the page loads.

On 5/11/2020 at 9:13 AM, abibacon said:

I have used the section ID and added in the custom scroll smooth css. However if I scroll to to the top of the page and click the same link again it won't scroll down a second time, like it does in 7.0. Any tips? 

Hi @abibacon! So many answers in this thread but can't figure out if any of them are actually answering your specific question. I'm experiencing the same thing. Did you end up figuring this out?

Thanks!

Kacia

This is so "Un-Squarespace-Like" that I can't believe it. I really hope someone fixes this asap and gives us a solution like 7.0. I appreciate @Kate for selling us the add-on, but I don't think that's the way it should be. Also, @ulf.kollross, I much appreciated your little code, which works well.
Happy New Year!
Mikko

Has anyone found a way how this will work on fixed header? Whenever it jumps down to the section, the upper portion, whereby the title is placed, remains unseen.

On 1/27/2021 at 6:51 AM, paigethirtytwo said:

Has anyone found a way how this will work on fixed header? Whenever it jumps down to the section, the upper portion, whereby the title is placed, remains unseen.

Can you share link to your site & which code did you use? We can check easer

On 3/11/2020 at 8:05 PM, SpeckleDigital said:

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!
 

 

Hi, I'm on 7.1 and I tried this method and Squarespace still reloads the page but the scrolls smoothly to the section (before this Squarespace was reloading the page and jumping to the section)

I've also tried the below and it's doing the same thing (reload page and scroll down smoothly to section)

html {
  scroll-behavior: smooth;
}

but I can't figure out how to get squarespace not to reload the page.

Any help appreciated. Thanks!