Squarespace Jump To Section links enable website visitors to quickly navigate directly to specific sections within your page. Often called anchor links, these squares allow visitors to quickly and efficiently traverse long scrolling pages while improving user experience.
This tutorial will explain how to add a Jump To Section using the code editor and provide some valuable advice and tricks that will make your website more efficient.
How to add a jump to section
Implementing a jump to section on your website allows visitors to easily navigate long pieces of content on it – both within pages and between them – making for a better user experience for those visiting your site. Jump To sections can also serve as an interactive table of contents or list of frequently asked questions (FAQs).
To add a jump to section to your website, first create a code block which can be placed above the area you would like a link for; this could be text, an image or even button links. When clicking one of the links it will then smoothly scroll towards its designated location according to what has been designated by your code block; each anchor tag (the a> tag) refers only to one section so be sure each anchor tag has an accurate name.
Anchor tags allow for multiple anchor links on a page, so when using multiple, make sure each tag is given its own distinct name to avoid confusing visitors. This will help avoid any unnecessary hassle for them!
Once the code block is added to the area of your page where you would like a jump link, move higher up on the page and highlight text or button you would like as the jumping off point. Next, add hashtag followed by quoted word from code block into URL space before saving.
This is an easy trick you can add to your site that will instantly improve navigation and give visitors a better user experience. I encourage you to give it a try today on several key pages! It is surefire way to increase conversion rates! If any questions arise or feedback needs to be provided below – I love hearing it all!
What is a jump to section?
Jump to section links are a fantastic way to provide visitors with swifter navigation through long pages on your site. They provide extra navigation options for visitors, making index pages or blog posts that span multiple pages more user-friendly.
To create a jump to section, first you need to identify which part of your page you would like to link directly. You can do this by adding an ID attribute to the HTML element containing your target section and creating an anchor link pointing directly towards it by inserting an anchor tag containing its ID attribute into an anchor link with # prefixed after creating a hyperlink with # as its destination.
Once you’ve created this type of link, it’s essential that it works as expected before testing it further. This is particularly important with HTML changes as one mistake can have serious repercussions for other parts of your page’s content. To test your link simply launch your browser, click it, and see if you are taken directly to where you need to go on the page.
Jump to sections are an attractive feature of content blocks because they work on both index pages and blank ones, can be added to images/video blocks without providing embed code – making them useful if working with content writers who may not have full access to your website’s code.
Utilizing jump to sections provides another benefit – replacing tables of contents. This feature can be particularly beneficial on long, multi-topic pages where it may be challenging to organize content into distinct logical sections. With jump to sections, your content remains organized and structured while improving user experience for visitors.
Adding a link to a jump to section
Jump-to links provide an easy way for visitors to navigate pages more quickly by making it simple for them to skip directly to specific sections. Also known as anchor links, these simple hyperlinks use special HTML tags that point directly to specific locations on a page or within your site.
Links such as these are ideal for ecommerce websites or longer blog posts where visitors may not take the time to read through everything before reaching what interests them. They can also be used on landing pages for businesses to direct people directly towards services and products they require.
Squarespace makes adding links to specific sections very straightforward. First, decide the section on your page you wish to link – typically this will be a subsection – before creating your hyperlink in that spot using text, buttons and images as desired. Copy and paste its url into the Link Builder for easy linking!
Apply, and your link is active – it should now jump directly to the section you selected! To test it out, visit the website in question and click on its link; it should take you directly there!
Note: While this method for creating jump to sections may seem straightforward, there are better approaches using basic code – for instance there’s an article detailing an approach using page sections as anchor links that works in both Fluid Engine 7.0 and Classic Editor versions.
One way of creating a jump to link is using a custom code block above the paragraph you wish to serve as your jumping off point. This block should contain an a id=””> tag with name attribute and when someone clicks it they will be taken directly to that section of page that was specified within aid=””> anchor tag.
