Adding a scroll to top button to your website can be a great way to allow your users to navigate, especially if you have long-scrolling pages. A scroll button should be subtle and it has become expected to see one on the lower right of the page. Some sites include the button in the footer while others use fixed positioning to place the button and show/hide the button based on where the user is on the page. This tutorial will cover how to display the scroll button using jQuery when the user scrolls down the page a little. We’ll use an icon font from Font Awesome but you could easily substitute a Bootstrap glyph or any other icon.
Style and Script Libraries
We need to make sure two libraries are present on our page. The first is jQuery, as we’ll be using that to hide/show the button and to scroll the page when the user clicks the button.
If jQuery is not already in use on your site, add the following just before the closing <body> tag of the page.
|
1 2 3 4 5 6 |
<!-- ... --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </body> </html> |
The next step is to add the icon font library. If you’re not already using Font Awesome, then include the following to the <head> element of your page.
|
1 2 3 4 5 6 7 |
<head> <!-- ... --> <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"> </head> |
The HTML Markup
The HTML for the button is pretty straight forward. It may change slightly if you use an icon font, an image, or text. We’ll be using an icon font for this demonstration. Add the anywhere in the <body> element of the page.
|
1 2 3 4 5 |
<div class="scroll-top-wrapper "> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span> </div> |
CSS Styles
The CSS for the button is pretty straight forward as well. The colors, sizes, and other properties can be changed, but the important styles are the position, visibility, and opacity properties. Add the following to the <head> element.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<style> .scroll-back-to-top-wrapper { position: fixed; opacity: 0; visibility: hidden; overflow: hidden; text-align: center; z-index: 99999999; background-color: #777777; color: #eeeeee; width: 50px; height: 48px; line-height: 48px; right: 30px; bottom: 30px; padding-top: 2px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .scroll-back-to-top-wrapper:hover { background-color: #888888; } .scroll-back-to-top-wrapper.show { visibility:visible; cursor:pointer; opacity: 1.0; } .scroll-back-to-top-wrapper i.fa { line-height: inherit; } </style> |
The .show class is used to change the visibility of the button, the default style keeps the button hidden from view. There are also transition properties to fade the button in and out when shown. This transition is why we aren’t using display:none; or jQuery.hide() to hide the button.
The Javascript
There are two components that need to be handled by jQuery. The first is to show/hide the button as the user scrolls around the page. The second is to scroll to the top of the page when the user clicks the button. To begin create an empty <script> element right after the jQuery library script at the bottom of the <body> element.
Show and Hide the Button
To show and hide the button we use the jQuery ‘scroll’ event to detect if the user is scrolling. Check the top of the window and detect the offset to the top of the page, if it’s greater then 100 pixels show the button by adding the ‘show’ class to the ‘scroll-top-wrapper’ element. That 100 pixel offset is arbitrary and can be changed to suit your site.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.scroll-top-wrapper').addClass('show'); } else { $('.scroll-top-wrapper').removeClass('show'); } }); }); </script> |
Scroll to Top
The next step is to handle a button click and scroll to the top of the page. To do this we use the jQuery ‘click’ event. The scrollToTop function uses the jQuery animate method to scroll up with animation rather than instantly.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script> $(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.scroll-top-wrapper').addClass('show'); } else { $('.scroll-top-wrapper').removeClass('show'); } }); $('.scroll-top-wrapper').on('click', scrollToTop); }); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 500, 'linear'); } </script> |
Thant’s all there is to it, you should be able to load your page and see a button that looks something like this appear.
Update on 3/30/14
If you’re using WordPress you can now download my WordPress plugin which is built on these techniques.
Thanks for the tutorial. Only the .js and html isn’t correct (or the css). The class ‘scroll-back-to-top-wrapper’ in the css isn’t used in the .js or html. There ‘scroll-top-wrapper’ is used. Thanks again.