Harris template - turning navigation links into anchor links

Is there any way to turn the template generated navigation links into anchor links?
So instead of opening a new page, the site jumps down the page to the anchor link. I am using the Harris template and my client has decided he wants it to be a single page site, without secondary pages. Is there any way I can achieve this? I have currently added text links to the body of the website to act as the navigation and hidden the template generated navigation. Ideally though I want the navigation to be in the navigation bar and not in the site body. 

link is here:
https://koi-tuba-ck62.squarespace.com/
PW: HaefeleSugaree

You put the actual pages in the Not Linked section and then add Links to them in the main navigation. 

Awesome! That works great.

It's rather obvious now that it has been explained to me!

Thank you 😁

I do have a follow up question:

While the links work great in desktop, the anchor link code does not work in mobile (from the hamburger drop down). 

Is this something that can also be fixed?

Yeah - rather than just /#purpose you can use /home#purpose

However, this has the disadvantage of reloading the page rather than just scooting down to the anchor point. 

If you're happy with coding you could leave the desktop links as they currently are and modify the mobile ones to contain /home#whatever

So, using /home#ourpurpose does not work on mobile or desktop. 
I tried using several variations of the path but none worked in mobile. 

As an extra aside, I added this code to the Code Injection section in the Header box, which allows the site to smooth scroll to the anchor link. Could be useful for anyone else playing around with anchor links:
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script><script type="text/javascript">$(function() {$('a[href*=#]:not([href=#])').click(function() {if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {var target = $(this.hash);target = target.length ? target : $('[name=' + this.hash.slice(1) +']');if (target.length) {$('html,body').animate({scrollTop: target.offset().top}, 1000);return false;}}});});</script>

Note: after adding the above code the anchor links are now working in mobile - using /#ourpurpose. Which is odd. 

Thanks so much for this as I am doing the same for a client. I had gotten this far already but would like to take it a step further -- is there a way to indicate Active state in the navigation links when a) someone scrolls manually to the next 'page' section, or b) clicks on the anchor link navigation item and then it scrolls to it, as described above?

On 11/11/2019 at 3:15 PM, DaImp said:

So, using /home#ourpurpose does not work on mobile or desktop. 
I tried using several variations of the path but none worked in mobile. 

 

As an extra aside, I added this code to the Code Injection section in the Header box, which allows the site to smooth scroll to the anchor link. Could be useful for anyone else playing around with anchor links:
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script><script type="text/javascript">$(function() {$('a[href*=#]:not([href=#])').click(function() {if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {var target = $(this.hash);target = target.length ? target : $('[name=' + this.hash.slice(1) +']');if (target.length) {$('html,body').animate({scrollTop: target.offset().top}, 1000);return false;}}});});</script>

 

Note: after adding the above code the anchor links are now working in mobile - using /#ourpurpose. Which is odd. 

Hi, this sounds exactly what I am looking for, it looks like I need to edit the script above to be specific to my site?

So location.pathname.replace etc. will need to be updated to be specific site?

And if that is correct, could someone please help explain what specifically I would need to enter?

On 10/18/2022 at 4:25 PM, cube said:

Hi, this sounds exactly what I am looking for, it looks like I need to edit the script above to be specific to my site?

So location.pathname.replace etc. will need to be updated to be specific site?

And if that is correct, could someone please help explain what specifically I would need to enter?

What is your site url? We can check easier

URL is https://rust-kale-a2el.squarespace.com

password is: coatings010

The 'Product' link at the top of the page has an anchor.

When clicking the link from any page I would ideally like it to scroll down from the top.

On 10/24/2022 at 6:10 PM, cube said:

URL is https://rust-kale-a2el.squarespace.com

password is: coatings010

The 'Product' link at the top of the page has an anchor.

When clicking the link from any page I would ideally like it to scroll down from the top.

You mean on Homepage > Click Products >> It should scroll down to Products section

On other pages > Click Products >> it should scroll to top of current page?

2 hours ago, tuanphan said:

You mean on Homepage > Click Products >> It should scroll down to Products section

On other pages > Click Products >> it should scroll to top of current page?

At the moment it will scroll down from the top of the Home Page if I click 'Products' from the Home Page.

But if 'Products' is clicked from the top menu on another page it jumps direct to the Products anchor on the Home page with no scrolling.

So for instance: if I am on the 'Expertise' page and click 'Products', I'd like it to start at the top of the Home page and then scroll down to the anchor location.

To the OP. How did you do a rotating header image for the page? I don't see any way of doing that with the Harris template. Thanks!