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

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!

Link to post
  • Replies 45
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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 sett

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

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

Posted Images

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

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

Link to post
  • 2 weeks later...
  • 1 month later...
  • 1 month later...
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.

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

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?

Link to post
  • 1 month later...
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) 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

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?

Link to post

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

image.thumb.png.6000f6493bb4d82a6884f2bc3c4ba4df.png


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!
 

 

Edited by SpeckleDigital
Accidentally uploaded image twice
Link to post
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!

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

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

Link to post
  • 3 weeks later...

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

Screen Shot 2020-04-24 at 2.05.27 PM.png

If you are looking for a way to add Anchor Links, Gallery Blocks, or a Rotating Banner with Content Blocks overlaid in Squarespace 7.1, you can find all these plugins in our Squarespace add-on store here: www.Squareaddons.com -- Enjoy! 

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