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>

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>

For example:

<a href=#Puppy-Playtime-Party>Puppy Playtime Party</a>

Do this for each anchor you made.

Putting a Box Around the Text

Now we are going to put a box around the text and use CSS to make stylistic choices.

So first, in the HTML, we are going to but a <div> around our links and give it a class.

This will look like this:

<div class=“boxstyle”>

<h1> Title </h1>

<a href=#Puppy-Playtime-Party>Puppy Playtime Party</a>

<a href=#Cat-Cafe>Cat Cafe</a>

</div>

Designing that Box

Now we switch over to CSS and make a class for boxstyle. (And remember that in SquareSpace, our CSS must be surrounded by <style></style>.

So:

<style>

.boxstyle {

}

</style>

In our boxstyle we can start adding a bunch of fun stuff. Here is what I used:

.boxstyle {
top: 140px;
right: 113px;
z-index: 999;
position: fixed;
border-width:2px;
border-style:solid;
background-color: rgba(200, 200, 200, .85);
display: block;
color: white;
border-radius: 10px;
text-align: right;
padding: 10px;
width: 190px;
}

Some of these can be edited to customize your own box, such as the color, exact location, text-alignment, border radius and more. However, the z-index and position should be left alone no matter what.

We also want to add:

.boxstyle a {
display: block;
}

This ensures that our text reads like a list as opposed to one horrifying run-on sentence.

Check-In, Where are we?

At this point, we should have a grey box with text in it. When the text is clicked, it should automatically bring us to the point on the page where we placed the anchor. If that works for you, feel free to stop reading here! (But give me those claps!!!)

Optional Steps

Now we can get a little funky by using a hover state.

First, let’s just practice hover states by making a slight color adjustment when hovering, to reinforce mouse location for the user:

.boxstyle:hover {
background-color: rgb(200, 200, 200);
}

This will make our box a little darker when the user is hovering. Again, feel free to go crazy with this. Make your box turn bright blue, or add a color: rgb(15, 95, 24) to make your text a dark, forest green!

Hover States 2

Now let's say we want the box to only show “Speedy Nav.” When the user hovers the mouse over that, the box opens up to show the options. This preserves valuable screen real estate, which is crucial for a fixed item.

Again, we’re going to use hover states, but first we have to go back into our HTML and put a <div> around just our links, so a reminder:

<div class=“boxstyle”>

<h1> Title </h1>

<div>

<a href=#Puppy-Playtime-Party>Puppy Playtime Party</a>

<a href=#Cat-Cafe>Cat Cafe</a>

</div>

</div>

So now when we go to the CSS, we can use .boxstyle div to target just our links like so:

.boxstyle div {
display: none;
}

This makes it so we don’t see the box, except for our title (h1).

.boxstyle:hover div {
display: block;
}

This makes it so we see the full box, including links, when we hover over the box.

Cool, this is great, but it’s a little choppy…

Okay, so you succeeded in accomplishing everything so far, and are feeling good, but you don’t like the feeling of being immediately placed on a separate part of your page. You want that smooth scroll vibe.

I’m not going to pretend to know JavaScript like I just pretended to know CSS and HTML so…here you go:

<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script type=”text/javascript”>

$(‘a’).click(function(){
$(‘html, body’).animate({
scrollTop: $( $(this).attr(‘href’) ).offset().top
}, 2000);
return false;
});

</script>

Paste this underneath the rest of your code and you will have smooth scrolling!

Full code:

This is the full code, but make sure to replace all of the bold text and customize the CSS however you want! (The best way to learn is to play around!) The first step if it’s not working is to check that your anchors match your links perfectly!

For Anchors

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

For Main Code Block at Top of Page

<style>
.boxstyle {
top: 140px;
right: 113px;
z-index: 999;
position: fixed;
border-width:2px;
border-style:solid;
background-color: rgba(200, 200, 200, .85);
display: block;
color: white;
border-radius: 10px;
text-align: right;
padding: 10px;
width: 190px;
}
.boxstyle:hover {
background-color: rgb(200, 200, 200);
}
.boxstyle a {
display: block;
}
.boxstyle div {
display: none;
}
.boxstyle:hover div {
display: block;
}
h1 {
margin-left: 10px;
margin-bottom: 0px;
}
</style>

<div class=”boxstyle”>
<h1>
Skip Ahead
<h1>
<div>
<a href=“#text”>text</a>
<a href=“#text”>text</a>

(as many links as you want can go here, just continue the format)

</div>

</div>

<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script type=”text/javascript”>
$(‘a’).click(function(){
$(‘html, body’).animate({
scrollTop: $( $(this).attr(‘href’) ).offset().top
}, 2000);
return false;
});
</script>

I’m a Product Designer at Grubhub working on the LevelUp Team to create branded apps for restaurants.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store