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

Adding anchor links in 7.1

Recommended Posts

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!

Share this post


Link to post

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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post

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

Edited by colin.irwin

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
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.

Share this post


Link to post

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.

Edited by christiansparrow

Share this post


Link to post
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.

Share this post


Link to post
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?

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