Jump to content

Using anchor links: why and how?

Recommended Posts

Anchor links or page jumps are a vital component to any website, but specifically important for those websites that are text-heavy or have a lot of content on a single page. In essence, an anchor link is a special URL that takes you to a specific place on a page. They’re useful for letting your visitors skip to the parts of your content that interest them, and they’re a great organizational device that aids readability. As an added bonus, they help with SEO too.

In Squarespace, there are two types of anchor links you can use, depending on the version of our platform you’re using. For example, if your site is on the Squarespace 7.0 platform, you can create anchor links on Index Pages using the steps in the guide Adding index page anchor links. If your site is on the 7.1 version, you can add a small custom code snippet and create an anchor link on Layout Pages. Check out our guide Creating anchor links. 

Before stuffing your Main Navigation with anchor links, there are some considerations you need to take into account. For example, too many items in your navigation can be aesthetically overwhelming and become a hindrance to readers. Links that are too close together can be a problem on mobile, specifically for visitors with limited hand mobility.

How do you use anchor links on your website? Do you have any special practices or tricks? Let us know in the comments below!

 

Link to comment
  • 2 weeks later...

Anchor Links are really helpful.  I use them all the time.  Especially on our SquareKicker websites.  The feature page here is a great use case.  Here is a link to SquareKicker Anchor Link Video.  This link will take you to the specific section on the page using Anchor Link too.

https://squarekicker.com/features#anchor-links 

SquareKicker

Hi, I'm Nick a Co-Founder at squarekicker.com.  Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. 

Pro Extension  ●  Squarespace Template Store  ●  Inspiration  ●  Tutorials  ●  Resources

 

Link to comment

Hey, thanks for asking. I use anchor links a lot too (in french). 

First, I use them for multiple categories on a magazine: so the reader can directly jump to the category he wants: https://influenz.design/magazine

I use them as well as the main structure for a glossary (for the alphabetical sections as well as for the definitions themselves): https://influenz.design/glossaire

Link to comment
On 10/13/2021 at 6:33 PM, Jo_SQSP said:

Anchor links or page jumps are a vital component to any website, but specifically important for those websites that are text-heavy or have a lot of content on a single page. In essence, an anchor link is a special URL that takes you to a specific place on a page. They’re useful for letting your visitors skip to the parts of your content that interest them, and they’re a great organizational device that aids readability. As an added bonus, they help with SEO too.

In Squarespace, there are two types of anchor links you can use, depending on the version of our platform you’re using. For example, if your site is on the Squarespace 7.0 platform, you can create anchor links on Index Pages using the steps in the guide Adding index page anchor links. If your site is on the 7.1 version, you can add a small custom code snippet and create an anchor link on Layout Pages. Check out our guide Creating anchor links. 

Before stuffing your Main Navigation with anchor links, there are some considerations you need to take into account. For example, too many items in your navigation can be aesthetically overwhelming and become a hindrance to readers. Links that are too close together can be a problem on mobile, specifically for visitors with limited hand mobility.

How do you use anchor links on your website? Do you have any special practices or tricks? Let us know in the comments below!

 

very informative. But can we make jump links type links anchors in AMP type website. Like i have to go another page and when i click it open same like when we click on jump link?

Edited by martybirdese
Link to comment
  • 4 months later...

Anchor links are very useful, so much so we suggest that an anchor block should be added to make it that little bit easier for the user to add an anchor into a particular section of the site.

Adding code block anchors are easy enough but by having an anchor block it would make it easier for the developer to see the anchor in the edit mode of the website.

Edited by Sitefolk

Wordmark_Long_Pink.png.3a8c374f84802839c0cc10d56a0752d7.png

Link to comment

I find anchor links most useful for long-form blog content. I recently wrote this article https://tinycoastdigital.com/insights/2022-web-design-trends and went back and added anchor links when I realized it was a lot to scroll through if someone was only interested in exploring a few of the topics. 

I also use anchor links in a few places on my website to take people straight to a services section and provide a more efficient experience. 

Link to comment
On 10/13/2021 at 6:33 PM, Jo_SQSP said:

Anchor links or page jumps are a vital component to any website, but specifically important for those websites that are text-heavy or have a lot of content on a single page. In essence, an anchor link is a special URL that takes you to a specific place on a page. They’re useful for letting your visitors skip to the parts of your content that interest them, and they’re a great organizational device that aids readability. As an added bonus, they help with SEO too.

In Squarespace, there are two types of anchor links you can use, depending on the version of our platform you’re using. For example, if your site is on the Squarespace 7.0 platform, you can create anchor links on Index Pages using the steps in the guide Adding index page anchor links. If your site is on the 7.1 version, you can add a small custom code snippet and create an anchor link on Layout Pages. Check out our guide Creating anchor links. 

Before stuffing your Main Navigation with anchor links, there are some considerations you need to take into account. For example, too many items in your navigation can be aesthetically overwhelming and become a hindrance to readers. Links that are too close together can be a problem on mobile, specifically for visitors with limited hand mobility.

How do you use anchor links on your website? Do you have any special practices or tricks? Let us know in the comments below!

 


Very informative. I have a question, I want to ask when we are adding anchor which is the best technique, open the new link in same window or other window?
Thank you.

Edited by Victoriaviolet
Link to comment
On 3/16/2022 at 11:57 PM, Victoriaviolet said:

I want to ask when we are adding anchor which is the best technique, open the new link in same window or other window?

If I understand correctly. You are wanting to know if clicking on a link should stay in the same tab/window or open a new tab/window?

It's been a while since I've read up on this topic. My personal feeling is I dislike having new tabs/windows opened when I click on a link. My browser provides those functions via a context menu so I'm perfectly capable of making that decision for myself. I don't need a web designer to decide for me. My reading years ago suggested that folks really dislike tabs/windows opening when a link is clicked. To be clear there is a place for forcing a new tab/window but I think appropriate use cases are very limited.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
12 minutes ago, Victoriaviolet said:

Yes I wanted to ask the same question "You are wanting to know if clicking on a link should stay in the same tab/window or open a new tab/window?"

So according to your experience we have to stay on the same window?

Thank you for your guideline. 

Hi, Victoria:

A good rule of thumb is: if the link is to an internal page (so a page on your own website), then it should open in the same tab but if it links to an external page (another website), then it should open in a separate tab. Of course there can be exceptions and it’s ultimately up to you.

The reasoning is that if you don’t open another tab when linking to an outside source, you’ll inadvertently be leading people away from your own site which affects your traffic, bounce rate, and potentially your search ranking.

I hope this helps and please let me know if you have any other questions ♥️

Link to comment
7 minutes ago, FluffyPaper said:

Hi, Victoria:

A good rule of thumb is: if the link is to an internal page (so a page on your own website), then it should open in the same tab but if it links to an external page (another website), then it should open in a separate tab. Of course there can be exceptions and it’s ultimately up to you.

The reasoning is that if you don’t open another tab when linking to an outside source, you’ll inadvertently be leading people away from your own site which affects your traffic, bounce rate, and potentially your search ranking.

I hope this helps and please let me know if you have any other questions ♥️

Great. I just want to clear the concept of bounce rate and traffic. I used all the links open in new window rather it is internal or external. I have a website and all the internal and external links open in new tab. I will share the site address.

Now I have to change all the links which are opening in new tab? 

Link to comment
3 minutes ago, FluffyPaper said:

The reasoning is that if you don’t open another tab when linking to an outside source, you’ll inadvertently be leading people away from your own site which affects your traffic, bounce rate, and potentially your search ranking.

This is the use case I would not use open a new tab/widow for. I don't need a web designer deciding for me how to control my tabs/windows. The browser already has all the controls I need to get back to a site if I want to. This is the annoying behaviour I was referring to in the study I read years ago. When a site does this to me I leave as fast as I can and don't come back.

Folks do whatever you think will work for you but keep in mind there are folks out here who don't like this behaviour.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
10 minutes ago, creedon said:

This is the use case I would not use open a new tab/widow for. I don't need a web designer deciding for me how to control my tabs/windows. The browser already has all the controls I need to get back to a site if I want to. This is the annoying behaviour I was referring to in the study I read years ago. When a site does this to me I leave as fast as I can and don't come back.

Folks do whatever you think will work for you but keep in mind there are folks out here who don't like this behaviour.

Thanks for your help. 
I need only one suggestion from you, kindly guide me about this.  I have developed a website and all the internal and external links are opening in new tab. 

Kindly just guide me I will change the internal link behaviour (open in same tab) and external link behaviour(open in new tab)? If you want my site address to ding in it I will share it with you.
Thank you.

Link to comment

@Victoriaviolet

My suggestion is to not open new tabs/window for internal pages or external pages. Unless you have a really compelling reason to do so.

Please see Opening Links in New Browser Windows and Tabs. I think the article does a good job of explaining when not to and when to use links that open new tabs/windows.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Just now, creedon said:

@Victoriaviolet

My suggestion is to not open new tabs/window for internal pages or external pages. Unless you have a really compelling reason to do so.

Please see Opening Links in New Browser Windows and Tabs. I think the article does a good job of explaining when not to and when to use links that open new tabs/windows.

Now done. Your suggestion is highly appreciated. I will keep in mind you suggestions.  Also visit this link which you have shared. 

Thank you for your kind support. 

Link to comment
22 hours ago, creedon said:

This is the use case I would not use open a new tab/widow for. I don't need a web designer deciding for me how to control my tabs/windows. The browser already has all the controls I need to get back to a site if I want to. This is the annoying behaviour I was referring to in the study I read years ago. When a site does this to me I leave as fast as I can and don't come back.

Folks do whatever you think will work for you but keep in mind there are folks out here who don't like this behaviour.

Hi, Creedon:

Thanks for sharing your opinion.

When you consider what most people will be using a Squarespace site for (a personal blog or solopreneur/small business website), 98-100% of all anchors will be to internal pages and therefore, with the rule of thumb I suggested to Victoria, will open in the same tab. So, while what you expressed as a potential issue is valid, it’s really not a concern here, as it would virtually never happen in this scenario.

Link to comment
  • 2 weeks later...
On 10/13/2021 at 6:33 AM, Jo_SQSP said:

If your site is on the 7.1 version, you can add a small custom code snippet and create an anchor link on Layout Pages. Check out our guide Creating anchor links. 

Is there a particular reason why the guide recommends using setting the section ID in a <p> or <a> tag? That's how I was originally creating anchor links, but I noticed very inconsistent results with actually jumping to the target. Sometimes it wouldn't go anywhere despite triple checking the ID and spelling. Other times, it would jump well past the anchor target.

I now use the ID in a <div> tag and have had much more reliable results, with the anchor link landing on the target section everytime.

Link to comment
  • Jo_SQSP unpinned this topic
  • 3 months later...
On 3/14/2022 at 12:12 PM, eileenpreston100 said:

Is there a way to create anchors that work on Iphones and safari browsers. I created an anchor link at the top of a page and discovered it doesn't work on my mobile site. Most people use Iphone for mobile so I was hoping there would be a solution..

I'm having the same issue. Has anyone found a solution to this?

Link to comment

Create an account or sign in to comment

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

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