How to Add "Jump Links" to a Squarespace Webpage

 
How to Make Jump Links in Squarespace Patricia & Co.
 


Today I am going to teach you a simple way to add “Jump Links” to a Squarespace page, though this code will work for non-Squarespace webpages as well. A jump link is a link at the top of a webpage that, when clicked on, jumps the reader down to a different place on the same page. For example my services page has three jump links at the top that take you to the corresponding package information further down the page. 

Jump links have become increasingly popular now that many websites opt for long, scrolling content rather than many separate pages. Using long pages and jump links works especially well if your traffic is mostly from mobile devices; research shows that mobile users prefer to scroll through content rather than click around. Jump links are also helpful if you want to highlight important content on the page; like a restaurant having jump links to each different section of their dinner menu. This way users can scroll through the entire menu or jump down to the sections that they are most interested in (cocktail list, obviously 😉).

Jump links are simple to make and require a minimal amount of code. There are three steps involved in adding jump links to a webpage:

  1. Label the content sections you want to jump to
  2. Add links to the top of your webpage
  3. Optional - style your links with CSS
     

1. Label Content Sections with Code Blocks


Before we add any code, look at your webpage and decide what content you want to jump to. Take a moment to think about your content and what sections people will be most interested in seeing. Since I wanted visitors to my services page to be able to jump to my different design packages, I needed three links that would jump to each of the three design packages.

When you have decided which sections you want to jump to, place a Squarespace code block just above each of the sections that you want to jump to. I started with my “Brand Beginnings” package and added the code block just above the package name and description. Note that these added code blocks will function exactly like spacer blocks.

 

 
Add Code Block
 


When you have added the code block hit edit and make sure the drop-down in the upper right corner is set to HTML. Now give the block a one-word, all lowercase name (I have capitalized words in this code for readability only!) using the following HTML code:
 

 

See the Pen "Jump Links" Span Id's by Patricia (@patriciaandco) on CodePen.

 

This name can be anything you want, but be sure that each code block that you add in this step has a unique name. I decided to name my code block “beginnings."

Continue to add and name code blocks above each section that you want to jump to. I finished this step by adding two additional code blocks above my other two packages and named them “basics” and “premium” respectively. 


2. Add Links to the top of your webpage


Now that you have added and named code blocks right above the content you want to jump to, it is time to add the actual links at the top of your webpage. Insert a code block where you want the links to be, hit edit, and add the following HTML code. Each unique name here must match EXACTLY the name that you gave each code block in the last step. Be sure to leave the # symbol before each unique name, and again the capitalization is for readability only. 
 

 

See the Pen "Jump Links" Links by Patricia (@patriciaandco) on CodePen.

 

What this code is doing is making a link just like we would use if we were linking to another page, but instead of going to another page we are telling the internet browser “when someone clicks on this link, scroll the page down until you hit a section named ‘uniquename’.” My Squarespace code for these three links looked like this:

 
Links at top of webpage
 


3. Optional - Style Your Links with Custom CSS


The final step of this process is to add custom styles your links. This step is optional and can become complicated if you are not familiar with CSS. If you are using Squarespace these links will automatically adopt the link styles that you setup in the style editor, so additional CSS may not be necessary. As always, if you are not comfortable working with custom CSS don’t worry about it! Full disclosure, my fiance is a senior-level software engineer out here in San Francisco and he holds my hand through all of the custom code that I implement (and writes the code for all of the weird ideas that I have 😝).

This is all of the custom CSS that I added to the links on my services page. This custom CSS is written in the Custom CSS section of the Design menu; it is not written on the individual webpage like our other code. As you can see in the previous step above, I wrapped my links in a “div” tag and named it “jump-links.” I did this so that I could easily target these links in CSS and apply some custom styles to them without affecting other links on my website.
 

 

See the Pen Jump Links Custom CSS by Patricia (@patriciaandco) on CodePen.

 


I hope this was helpful and that you add some awesome jump links to your website! 

Patricia O'Connor

Patricia & Co. Design, San Francisco, CA 94109