Jo_SQSP Posted October 13, 2021 Share Posted October 13, 2021 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! M-Saleck, inkmouse, Tiny_Coast and 5 others 7 1 Link to comment
UpinaDay Posted October 19, 2021 Share Posted October 19, 2021 Thank you for this topic! I find that one page sites that have one main topic with sections are perfect for anchor links. It's not always necessary to have them but when you need them, you need them! No one likes to scroll for long 🙂 Thanks! Tiny_Coast, Jo_SQSP, Amaya_SQSP and 1 other 3 1 Link to comment
Nick_SquareKicker Posted October 30, 2021 Share Posted October 30, 2021 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 Tiny_Coast and M-Saleck 1 1 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
Florian Posted November 1, 2021 Share Posted November 1, 2021 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 Tiny_Coast 1 Florian Zellweger influenz.design — florianzellweger.com — florianzellweger.ch Link to comment
Guest Posted November 3, 2021 Share Posted November 3, 2021 (edited) 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 November 3, 2021 by martybirdese Link to comment
Sitefolk Posted March 11, 2022 Share Posted March 11, 2022 (edited) 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 March 11, 2022 by Sitefolk focusdesign, cherylr, CooksBay and 2 others 5 Link to comment
Tiny_Coast Posted March 12, 2022 Share Posted March 12, 2022 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. FluffyPaper and nathan 2 🌊 Tiny Coast Digital | Digital Marketing & Web Design 🌊 Link to comment
eileenpreston100 Posted March 14, 2022 Share Posted March 14, 2022 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.. Link to comment
Victoriaviolet Posted March 17, 2022 Share Posted March 17, 2022 (edited) 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 November 4, 2022 by Victoriaviolet Link to comment
creedon Posted March 18, 2022 Share Posted March 18, 2022 (edited) 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 June 29, 2022 by creedon Victoriaviolet 1 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
Victoriaviolet Posted March 22, 2022 Share Posted March 22, 2022 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. Link to comment
FluffyPaper Posted March 22, 2022 Share Posted March 22, 2022 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 ♥️ Victoriaviolet and nathan 1 1 Link to comment
Victoriaviolet Posted March 22, 2022 Share Posted March 22, 2022 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
creedon Posted March 22, 2022 Share Posted March 22, 2022 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. Victoriaviolet 1 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
Victoriaviolet Posted March 22, 2022 Share Posted March 22, 2022 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
creedon Posted March 22, 2022 Share Posted March 22, 2022 @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. Victoriaviolet 1 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
Victoriaviolet Posted March 22, 2022 Share Posted March 22, 2022 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
FluffyPaper Posted March 23, 2022 Share Posted March 23, 2022 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
nathan Posted April 1, 2022 Share Posted April 1, 2022 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
hey_sp Posted September 13, 2023 Share Posted September 13, 2023 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment