How to add back-to-top buttons that stick to the bottom corner of your website

Add buttons that float

In our private support community, Jasmine had a question:

Does anyone know how to do those “back to top” buttons that float down with you as you scroll?

Katy replied: Jasmine, we demonstrate how to do back-to-top buttons here in this video.

Basically, these jump down, jump up, and jump around the page, and the links work like this:

You need to place two items on each page:

1. A link pointing to another section of the page
2. The point where the page will jump

Here’s the basic link command:

<A HREF="#codeword">Your Link</A>

Here’s how you denote where the jump will scroll the page:

<A NAME="codeword"></a>

Note: You don’t need to add any text inside of this link. You can leave it as empty, and therefore creating a secret link on the page!

Now, to make the little ‘back to top’ button, at the bottom of your templates, perhaps below the footer, add a new *text box in your Thesis Skin Editor, and name it Back To Top Box, and give it a class of backtotopbox

Then you need to target that box to give it a width (yes, an absolute width of say 100px or 50px and a height so that it stays small. Give it a background color, and then use css to fix it in place. eg.

[css].backtotopbox {&lt;br /&gt;<br />
width: 45px;&lt;br /&gt;<br />
height: 45px;&lt;br /&gt;<br />
background: none repeat scroll 0 0 #fce8e9;&lt;br /&gt;<br />
position: fixed;&lt;br /&gt;<br />
bottom:100%;&lt;br /&gt;<br />
left: 0;&lt;br /&gt;<br />

Let me explain what’s happening here: Position: fixed locks it in place; Bottom and Left position it in the bottom left corner.

Of course, you would then need to go into your Thesis Skin Content and update the box to have a link that goes to top of the page, eg.

<A HREF="#backtotop">back to top</A>

As the video that I linked to demonstrates, you also need to add a new *text box at the top of your templates, perhaps below your header – or just above it. You won’t see this box on the site – it will be hidden – but the ‘top’ secret target link will live inside it. So, call it ‘Top of Page’ and give it a class of topofpagebox

Then in your Thesis Skin Content, edit the box and add this HTML:

<A NAME="backtotop"></a>

Again, you don’t need to add any text inside of this link. You can leave it as empty, and therefore creating a secret link on the page.

Posted in

Katy Martin

Designer of beautiful brands, magnetic (social) marketing campaigns, and enlightened websites that seduce both your customers and search engines!