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.
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.
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
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:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%E2%80%9D%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.0%2Fjquery.min.js%E2%80%9D%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<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 re="stylesheet" id="font-awesome-css" href="//netdna.bootstrapcdn.com/font -awesome/4.0.3/css/font-awesome.css” type=”text/css” media=”screen”>
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
If you would like the up-arrow icon included, use this
<a href=”#” class=”back-to-top” style=”display: inline;”> <i class=”fa fa-arrow-circle-up”></i> </a>
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
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%0A.back-to-top%20%7B%0A%0Abackground%3A%20none%3B%0A%0Amargin%3A%200%3B%0A%0Aposition%3A%20fixed%3B%0A%0Abottom%3A%200%3B%0A%0Aright%3A%200%3B%0A%0Awidth%3A%2070px%3B%0A%0Aheight%3A%2070px%3B%0A%0Az-index%3A%20100%3B%0A%0Adisplay%3A%20none%3B%0A%0Atext-decoration%3A%20none%3B%0A%0Acolor%3A%20%23ffffff%3B%0A%0Abackground-color%3A%20%23ff9000%3B%0A%0A%7D%0A%0A%C2%A0%0A%0A.back-to-top%20i%20%7B%0A%0A%C2%A0%20font-size%3A%2060px%3B%0A%0A%7D%0A%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
.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.
Make it all happen with jQuery
This is where all the magic happens.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%0AjQuery(document).ready(function()%20%7B%0A%0Avar%20offset%20%3D%20250%3B%0A%0Avar%20duration%20%3D%20300%3B%0A%0AjQuery(window).scroll(function()%20%7B%0A%0Aif%20(jQuery(this).scrollTop()%20%3E%20offset)%20%7B%0A%0AjQuery(%E2%80%98.back-to-top%E2%80%99).fadeIn(duration)%3B%0A%0A%7D%20else%20%7B%0A%0AjQuery(%E2%80%98.back-to-top%E2%80%99).fadeOut(duration)%3B%0A%0A%7D%0A%0A%7D)%3B%0A%0A%0A%0AjQuery(%E2%80%98.back-to-top%E2%80%99).click(function(event)%20%7B%0A%0Aevent.preventDefault()%3B%0A%0AjQuery(%E2%80%98html%2C%20body%E2%80%99).animate(%7BscrollTop%3A%200%7D%2C%20duration)%3B%0A%0Areturn%20false%3B%0A%0A%7D)%0A%0A%7D)%3B%0A%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<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!
Sticky site elements are one of the trends of 2019. Explore even more (plus get the resources to create them!) with our free email course. Click here to sign up for the free course today!