Floating Navigation Tool for Scrolling — Squarespace

Aaron Cecchini-Butler
5 min readNov 28, 2018

First, a disclaimer:

I am not a programmer. I am simply a designer, doing my best in a world of code. And to this end, I’ve been exposed to my fair share of HTML, CSS, and JavaScript.

While working on my portfolio, one of the more important pieces of feedback I received involved the ability to navigate quickly to different points of the page. This user wanted the ability to quickly take a peek at the final designs, and then start over.

It took quite a bit of playing around, looking up snippets of code, and receiving help from my mentor, but a solution arose, and I wanted to share it with the world to save others from my fate. (It really wasn’t that bad, but this will be easier!)

For those of you on a schedule, or who already know your way around a bit of code

The full code is at the bottom, copy and paste, customize and use!

First the Annoying Part

The first step is going through your page, and inserting a code block directly above any item you want to use as an anchor.

In the code block type:

<div id=“text”></div>

Where text is the title of that anchor. If the title is more than one word, make sure to use dashes instead of spaces.

Ex:

<div id= “Puppy-Playtime-Party”></div>

This has to be done for every single anchor you want to use, and make sure to give them easy titles because there is no easy way to go see what you assigned it! (Or even better, write down the titles, including capitalization.)

Connecting the Anchors to Text

In order to do these next steps, we must make a code block at the very top of the page.

Now we are going to link the anchors we created to text (don’t worry if things look weird at this stage, the pretty part comes next!)

First type a title for your menu using:

<h1> Title </h1>

(You can use h2, h3 or whatever you want)

For example:

<h1> Speedy Nav </h1>

Then for the actual links we need to use:

<a href=#text>Text</a>

--

--

Aaron Cecchini-Butler

Senior Systems Designer at Grubhub working on Cookbook (our design system) — as well as contributing to product design work.