Creating an animated return to top button

This is a post from September 2013. I plan on updating it for cleaner more modern code

Here is what you will be making. Scroll down inside the box to see the arrow pop up in the lower right. When you hover the arrow it animates up using CSS. When you click the arrow it returns you to the top of the page.

FontAwesome Icons

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Take a look at the FontAwesome website for all the icons and more examples.

I use the FontAwesome chevron-up in this example. If you want to use the exact same code you will need to include the following in your <head> so that the class=”icon-chevron-up” will work properly.

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

HTML

Place this HTML anywhere on your page. I usually place this at right before the end body tag.

<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>

CSS

This can be placed anywhere. I usually place it in my global.css or main.css

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}

jQuery

You will need to include the jQuery library to use this script. Here is the newest version at the time of writing this article. You can visit http://jquery.com for the latest version.

//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

This can also be placed anywhere. I usually have a global.js that includes all my JS and jQuery. You could put it between <script> tags in your <head> if you wanted.

$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
});
$('#return-to-top').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});
🌱 digital garden