Have you tried Flywheel? Learn moreJoin the best designers and creative agencies in the world. Learn more

×
How to add a sticky back-to-top button on your website

How to add a sticky back-to-top button on your website

In the last few years or so, back-to-top buttons (or scroll-to-top buttons) have increased in popularity. When a user scrolls past a certain point on the website, this helpful button appears, enabling users to easily return to the top of a page. It’s an especially useful feature given how much content is shared on a variety of devices with smaller screens.

The example on the left is the scroll-to-top button I’ll show you how to create in this post. I actually used it for an event site that I recently designed. In most cases, the site’s users were on their mobile device before and throughout the event, so having a back-to-top button was pretty useful.

back-to-top-examples

We’ll be using Font Awesome to provide the up-arrow icon in the button. You may be familiar with Bootstrap, and that will also work well. Support for glyphicons is built right into Bootstrap, and you can still apply the concepts from this tutorial.

font-awesome

We’ll be implementing a fixed-position, or sticky, button that’s hidden or visible depending on where the user is on the page. Three elements work together to create the button:

  • HTML for the markup
  • jQuery to create the behaviors of the button
  • CSS to give it styling and personality
Remember: You should never make changes on a live site. Our free local development app, Local by Flywheel, will help you simplify your workflow and safely experiment with your site. Try it today!

Add jQuery to your site

First, check to see if you’re already using jQuery on your site by viewing the Source of your page. If you’re using Chrome, simply go to View > Developer > View Source. Do a Find and type “jquery.” If it’s already there, you obviously don’t need to worry about adding jQuery. If jQuery has not been added, add this code just before the </body> tag of the page:

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>

Make it awesome with Font Awesome

Before the closing </head> tag, let’s add Font Awesome. Font Awesome has many options for icons, so you might want to look around.

<link rel=”stylesheet” id=”font-awesome-css” href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” type=”text/css” media=”screen”>

Font Awesome is an awesome tool. Learn why you should start using it here.

Add HTML

So where should we put this code? This button has a fixed position, so there aren’t really any strict rules. I personally like to put it after the footer so that it’s after all of the page’s content. Just remember to keep it within the <body> tag.

If you would like the up-arrow icon included, use this i class:

<a href=”#” class=”back-to-top” style=”display: inline;”>

<i class=”fa fa-arrow-circle-up”></i>

</a>

The i class is where we specify the Font Awesome icon, in this case the up arrow. On the other hand, you can use text instead of an icon:

<a class=”back-to-top” style=”display: inline;” href=”#”>Back to Top</a>

Add CSS styling

If you’re using a separate style sheet, you can paste in the styles listed below. If you’re just experimenting for now, you can paste these before the closing </head> tag.

<style>

.back-to-top {

background: none;

margin: 0;

position: fixed;

bottom: 0;

right: 0;

width: 70px;

height: 70px;

z-index: 100;

display: none;

text-decoration: none;

color: #ffffff;

background-color: #ff9000;

}

 

.back-to-top i {

  font-size: 60px;

}

</style>

The .back-to-top class is a starting point for how the button will look. By default, it takes on the attributes of our anchor styling. If you need to be more specific, you can add color and background-color attributes.

Note that having the z-index value at 100 is very important so as to avoid overlapping with any other elements. The nested i class has a specific font size that’s fairly large, so our button is not only visible but large enough for a user to tap on a touch screen.

back-to-top-page

Make it all happen with jQuery

This is where all the magic happens.

If you have a separate file where you keep all your jQuery/JavaScript, you can be paste this script in there. In that case, you won’t need the opening and closing script tags. But for trial purposes, you can paste this right after the call to jQuery (you may have pasted it right before the closing </body> tag).

<script>

jQuery(document).ready(function() {

var offset = 250;

var duration = 300;

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop() > offset) {

jQuery(‘.back-to-top’).fadeIn(duration);

} else {

jQuery(‘.back-to-top’).fadeOut(duration);

}

});



jQuery(‘.back-to-top’).click(function(event) {

event.preventDefault();

jQuery(‘html, body’).animate({scrollTop: 0}, duration);

return false;

})

});

</script>

Let’s break this down so we get a better idea of what’s going on here.

We have our two variables, offset and duration. The offset describes when the button will appear: when the user scrolls down to the 250px mark. The duration is 300, which means that it will appear in 300 milliseconds.

The scroll function allows the button to be visible. The scrollTop function is what we’ve used for the current scroll position. Anything over 250 will show the button with the fadeIn function. When this position is greater than the offset, the button appears.

The fadeIn function is what makes the button appear, and the duration is the speed with which it appears. When the offset is less than 250, the button is not visible. It won’t be visible until the user scrolls to that position, and if they scroll back up above that position, the button will disappear. This is apparent in the fadeOut function. The animate function is what allows us to scroll to the top.

The back-to-top button is an easy element to implement on your site while also being super beneficial to your users. So move on up!

For more CSS tricks, check out these articles:

83 Comments

Join the discussion

Share this article:
Get more great content in your inbox

More articles

Get content like this sent directly to your inbox!

Install WordPress locally free