Floating Navigation Tool for Scrolling — Squarespace

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>