Using jQuery to add a dynamic “Back To Top” floating button with smooth scroll

Ever read a really long blog post or article and then had to scroll all the way up to the top of the screen to get to the menu? It can be a little frustrating. It’s easy to fix, you can have a fixed menu or as you’ll see here you can provide a quick and stylish way to get back to the top.

Getting Started

HTML wise all we need to do is add a “back to top” link at the bottom of the blog post

<a href="#" class="back-to-top">Back to Top</a>

We then need to style and position it. Here I’m setting its position to fixed and moving it to the bottom right side of the screen. I’ve also given it a semi-transparent background and finally hidden it. To make it stand out a little more, I’ve also given it a hover effect to darken the background a little.

.back-to-top {
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.80);
    font-size: 12px;
    padding: 1em;
    display: none;
}

.back-to-top:hover {    
    background-color: rgba(135, 135, 135, 0.50);
}

The jQuery

First off we need to add jQuery to our page, you can do this by adding a script tag like this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Or, if you’re using WordPress like this using add_action and wp_enqueue_script

function theme_enqueue_script(){ 
    wp_enqueue_script(‘jquery‘);  
}
add_action(‘wp_enqueue_scripts‘, ‘theme_enqueue_script‘);

The actual jQuery function is pretty simple, first we set our offset (after how much scrolling from the top we want the button to appear) and how long we want the scroll to top effect to last. We don’t want it to be too quick, but if it’s really slow it will be annoying. I’ve set it here to half a second.

We then need to make our button visible when the user scrolls. To do this we use the jQuery scroll function. In this function we grab the current scroll position using scrollTop , check to see if it is greater than our offset and if it is we show the button using the fadeIn function. If it’s not we make sure the button is not visible using the fadeOut function.

To actually scroll to the top, we need to intercept the click event on our button. First we prevent the default click from being triggered, and then we scroll back to the top using the animate function, passing in our duration. Finally we return false to ensure that no other events are raised after this.

jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    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;
    })
});

And here it is, a quick, simple but effective way of getting back to the top of a page.

http://www.tuicool.com/articles/iEZFBv