Back to top button using jQuery and CSS


When a web page has huge content then web page need an option where the visitors would be able to go to the other section easily. Using jQuery, we can provide the better user interface for automatic page scroll to the top.

In this tutorial, we’ll show you the creation and uses of BackToTop button. This button helps to scroll up the page by the clicking on this button. When the web page is scroll down, then automatically a button will appear and once the button is clicked then the page would be automatically scrolling up. Through this button, we can back to the top section from the bottom section of the web page without manual page scrolling. So, the BackToTop button makes the whole process quicker, easier and better.

We will use jQuery and CSS for making this button. In this tutorial, we will describe the whole process and codes. With this tutorial, you can learn the creation of the BackToTop button easily and integrate this button at your web project. It will help web developer to make their web project user-friendly. Please follow the short and simple tutorial given below. Also, you can view the live demo from the Demo link at the top and download the button from the Download link at the top.

JavaScript

 At first you need to include the jQuery library.

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

 Write some JavaScript codes for track the page scroll and appear the button if the page is scrolled down. Use JavaScript .scroll() function to know whether the page is scrolled or not. As per the below code if the page is scrolled down greater than 100 pixels, then the button will display otherwise button will hide.

$(window).scroll(function(){ 
    if ($(this).scrollTop() > 100) { 
        $('#scroll').fadeIn(); 
    } else { 
        $('#scroll').fadeOut(); 
    } 
});

 Write some JavaScript code for button click event. Once the button is clicked, the page would be scroll to the top. We will use the .animate() function and scrollTop event for page scroll to top.

$('#scroll').click(function(){ 
    $("html, body").animate({ scrollTop: 0 }, 600); 
    return false; 
});

 The full JavaScript codes are given below.

<script type='text/javascript'>
$(document).ready(function(){ 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 
});
</script>

CSS

 Now we’ll write some css codes for button view.

#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}

HTML

 The BackToTop button link HTML would like the below.

<a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Top<span></span></a>

Full BackToTop button script:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Back To Top Button by CodexWorld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){ 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 
});
</script>
<style type="text/css">
/* BackToTop button css */
#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}
</style>
</head>

<body>
<!-- BackToTop Button -->
<a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Top<span></span></a>

<!-- ++++++++++++ Page Content Goes Here ++++++++++++ -->

</body>
</html>

 If you have any query about this tutorials, please feel free to post your comments at the below comment form.

4 Comments

  1. Devi Said...
  2. Berko Evans Said...
  3. Ram Said...
  4. Micheal Victor Said...

Leave a reply

Connect With CodexWorld