Back to Top Button using jQuery and CSS


The Back to Top button allows the user to smoothly scroll back to the top of the page. It’s very useful to enhance the user experience of the website. When a web page has lots of content, this page needs a navigation option that takes the user scroll to the top with a single click.

In this tutorial, we will show you how to create a Back To Top button using jQuery and CSS. This Back to Top button enhances navigation experience of your website with long pages. After the browser window has been scroll down, a button will automatically appear on the bottom-right corner of the content area. Once this button is clicked, the page will be automatically scrolling up. Through this button, the user can back to the top section from the bottom section of the web page without manual page scrolling. So, the BackToTop button makes the navigation process quicker and easier.

You can easily create the Back to Top button using jQuery and CSS. Our example script provides an easy way to add BackToTop button on your website using jQuery and CSS. This jQuery Scroll to Top plugin is an instant solution to integrate back to top button functionality to the web project.

Follow the simple steps to create Back to Top button for your website without using any third-party jQuery plugin.

HTML

Create an HTML link (BackToTop button) that will take the user to the top of the webpage when clicked.

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

JavaScript

Our Back to Top button script uses jQuery, so include the jQuery library first.

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

The following jQuery tracks the page scroll and appears the button if the page is scrolled down. Use JavaScript scroll() method to know whether the page is scrolled or not. As per the below code, if the page is scrolled down greater than 100 pixels, the button will display, otherwise, the button will be hidden.

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

The following jQuery tracks the button click event. When the user clicks on the button, the page will scroll to the top. The animate() function and scrollTop event are used to scroll to the top of the page.

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

The complete JavaScript code for Back to Top button.

<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

The following CSS code is used to style the BackToTop button.

#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
#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)";
}

BackToTop Button Script

The following script is the complete code (HTML + JavaScript + CSS) to integrate scroll to top button on the web page.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>jQuery Back To Top Button by CodexWorld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/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:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
#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>

Social Popup on Page Scroll using jQuery and CSS

Conclusion

This tutorial provided a simple script to implement a back to top button on the web page. You can easily customize the BackToTop button appearance by modify the CSS code. If you want to scroll any specific part of the web page, go through the following tutorial.

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request

Recommended Tutorials For You

13 Comments

  1. Walter Said...
  2. Ammar Said...
  3. Raffael Said...
  4. Mistaz Said...
  5. Bagicha Singh Said...
  6. Gabriele Said...
  7. Nena Said...
  8. Julian White Said...
  9. Devi Said...
  10. Berko Evans Said...
  11. Ram Said...
  12. Micheal Victor Said...

Leave a reply