how to create scroll to the top of the page using jQuery CSS

Here i am writing code for How to create scroll to the top of the page using jQuery CSS in that article!

HTML code of scroll button

<a href="#" class="scrollToTop"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>

CSS code for animate scroll button

.scrollToTop{
    padding:20px; 
    text-align:center; 
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    position:fixed;
    bottom:75px;
    right:40px;
    display:none;
    background: #9ba91a;
        font-size:24px;
        border-radius: 50%;
        z-index: 9999;
}
.scrollToTop .fa-arrow-up{
    color: #ffffff;
}
.scrollToTop:hover{
    text-decoration:none !important;
        background: #000000;
}

JQuery code

The scrollTop() method sets or returns the vertical scroll-bar position for the selected elements. When the scroll-bar is on the top, the position is 0.
Below i am writing the jQuery code of this functionality, we will add a action on the scroll event to make the button appear when not at the top of the window and then make the button disappear when we are at the top of the page.

<script type="text/javascript">
$(document).ready(function(){
    
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    
    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
    
});
</script>