Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Robino

7.1 Help with anchor links not scrolling.

Question

I installed an anchor link on my homepage in Squarespace 7.1 and when i click the link it jumps to the section instead of scrolling down to it.

I'm using a CODE block with a DIV ID in the section I want to scroll to. see code below:

<div id="pp"></div>

and for the text link I put:

/homepage/#pp

It doesn't scroll, it just loads the section that has the Code Block with ID.

Any help is appreciated. Thx

 

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 4

Update #2

Ok I got it working. This is how you add Smooth scrolling anchor links in Squarespace 7.1

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.

Share this post


Link to post
  • 0

Update - just chatted with support and the agent said that anchor links are not supported in 7.1

It's strange, such a basic functionality.

If anyone know of a workaround please share, thx very much

Share this post


Link to post
  • 0
On 1/29/2020 at 3:46 AM, sarahcreates said:

This doesn't work for me unfortunately. Still trying to find a solution to anchor links. So frustrating!

Ah that sucks, I wonder why it's not working for you. I just re-tested on my website to make sure Squarespace didn't update something that broke my solution and it is still working. Make sure you use page sections and that you don't have any other css code related to page scrolling that might be interfering with the code above. 

Share this post


Link to post
  • 0

Worked for me! Thanks Robino.

One thing though - I couldn't easily find the page ID by clicking 'inspect'... So I just right clicked and went to View Frame Source, ctrl F to find the section I was aiming for, for example Contact Us section, so I typed in 'contact', and it brought me to the section where I found the page section. 

Copied the page section ID, put a hashtag in the link for my contact us button, and it works!

 

Thanks a heap.

Share this post


Link to post
  • 0

@Kate We bought your plugin and it does not work any better for us than putting the anchor links in the normal way 😞 I submitted a support ticket but hey, if you are around and want to help 🙂

Share this post


Link to post
  • 0

@theresa.southern I am finalizing an anchor link code for 7.1 that I have been working on for a while.

I think I have it almost done.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@theresa.southern

Please see here and PM me if you think this might help you.

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...