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

First the Annoying Part

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

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

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

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?

Optional Steps

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

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…

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:

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