Back To Top Button using HTML CSS and jQuery

Hi! Let's see how to implement back to top button using html, css and jquery. Good user experience means a lot for websites. If it fails, people will leave your site no matter how good and informative it is. Accessibility is the best way to ensure good user-experience. If people find a website easy to navigate through then they visit more pages and stay longer on the site.

Now a day's several websites uses infinite scroll technique and shows so much of content in a single page itself. Imagine how annoying it would be if user has to scroll back to the top of the page after going all the way down to read through long contents. In such case having a back-to-top button will help users to scroll back to the top of the page with just a single mouse click. And I'm going to show you how to add this back to top button with just css and jquery alone.

Also Read:

Implementing Back To Top Button using HTML, CSS & jQuery:

Even though we call it as a button, this Back to top button is a link that lets users to smoothly scroll back to the top of the page when clicked. It enhances user experience on long page websites. As for creating button, I'm going with pure css but you are free to use images in case you want a fancy one.

Come let's see how to implement back to top button on websites.

Step 1) Create Back To Top Button with HTML

First you need to create back to top button. This is the html markup for adding button to a web page.

<a href="#" class="back-to-top" title="Back To Top">&uarr;</a>

Step 2) Style Button with CSS

Next you need to add some styles to make sure the link look like an actual button. The following css will create a circle button with up arrow in it. And also position it at the bottom right corner of the page.

body {
    height: 5000px;
}

.back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    color: #FFF;
    background: #41CAD4;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    display: none;
    cursor: pointer;
    z-index: 9999;
}

.back-to-top:hover {
    background: #2DB6C0;
}

Step 3) Scroll Back to Top with jQuery

Finally you need to add some jquery script for the button to work.

In the second step, we have positioned the button at the bottom-right corner of the page, but it will be kept hidden until user starts scrolling. The back-to-top button will only appear when the page is scrolled down a little. For that you need to add scroll event to the page and display the button when it cross over 100 pixels mark.

$(document).ready(function(){ 
    $(window).on('scroll', function() {
        if ($(this).scrollTop() > 100) {
            $('.back-to-top').fadeIn();
        } else {
            $('.back-to-top').fadeOut();
        }
    });
});

Then you have to ensure the page smoothly scrolls back to top of the window on button click. For that you have to use animate() function on button click event.

$('.back-to-top').on('click', function(e) {
    e.preventDefault();
    $('html,body').animate({scrollTop: 0}, 600);
});

Done! Now you have everything in place. Run the script and scroll down the page a little. Now a small round button will appear at the bottom right corner of the page and stay there as long as you go down. Click on the button at any time and it will take you back to the top of the page. Once you are at the top, the button will disappear.

Complete Script:

<!DOCTYPE html>
<html>
    <head>
        <title>Scroll Back To Top using HTML, CSS and jQuery</title>
        <style type="text/css">
        body {
            height: 5000px;
        }
        
        .back-to-top {
            position: fixed;
            bottom: 40px;
            right: 40px;
            color: #FFF;
            background: #41CAD4;
            line-height: 30px;
            text-align: center;
            text-decoration: none;
            width: 32px;
            height: 32px;
            border: 0;
            border-radius: 50%;
            display: none;
            cursor: pointer;
            z-index: 9999;
        }
        
        .back-to-top:hover {
            background: #2DB6C0;
        }
        </style>
    </head>
    <body>
        <!-- page content goes here -->
        <a href="#" class="back-to-top" title="Back To Top">&uarr;</a>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){ 
            $(window).on('scroll', function() {
                if ($(this).scrollTop() > 100) {
                    $('.back-to-top').fadeIn();
                } else {
                    $('.back-to-top').fadeOut();
                }
            });
            
            $('.back-to-top').on('click', function(e) {
                e.preventDefault();
                $('html,body').animate({scrollTop: 0}, 600);
            });
        });
        </script>
    </body>
</html>