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>
Mukesh Jakhar - PHP Web Developer
Mukesh Jakhar

This is Mukesh Jakhar. I’m a professional web developer with 3+ years experience. I am always ready for freelance work and i am writing blogs in my free time. I love to learn new technologies and share with others.

I founded PHPKIDA in September 2015. The focus of this website to provide web development tutorials of PHP, WordPress, CodeIgniter, Jquery, MySQL, HMTL, CSS etc and sharing solution to problems which i already solved.

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.