Jump to content

Adding anchor links in 7.1

Recommended Posts

  • Replies 51
  • Created
  • Last Reply

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

Link to comment

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

Link to comment
  • 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 comment

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.

Link to comment
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 comment
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 comment
  • 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) 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 comment

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!
 

 

Link to comment
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 comment
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 comment
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 comment
  • 3 weeks later...

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?

Coding Wiz at rebeccagracedesigns.com

📖 Code Encyclopedia for Squarespace: rebeccagracedesigns.com/encyclopedia-of-code

🔥 Free CSS Tutorials: rebeccagracedesigns.com/blog

️ Free Guide to the 41 Most Popular CSS Properties: rebeccagracedesigns.com/popular-css-properties

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.