Scroll to top of a website using Jquery

In this article we are going to explain how to scroll up on click of a button using simple Jquery. So what we need to do that. We need a simple web page layout, some knowledge in CSS and Jquery. Please note, if we have simple HTML pages then place it anywhere but if the projects are made of many templates (like header.php, footer.php, content.php) , then we need to place the element to any of a common template (eg. footer.php). We suggest to place the element in footer. In this case we have used Font Awesome for the arrow icon.

HTML

<a href="javascript:void(0)" class="scroll-to-top"><i class="fa fa-arrow-up"></i></a>

CSS

/* style the button as per your design, here is a simple style */
.scroll-to-top {
    position: fixed;
    bottom: -100px;
    right: 30px;
    /*display: none;*/ /* this is optional if you want fadeIn/fadeOut effect */
    width: 60px;
    height: 60px;
    background-color: #cccccc;
    text-align: center;
    border-radius: 100%;
    color: #000000;
    font-size: 20px;
    padding-top: 15px;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

/* here we will use an optional class for the css3 animation */
.animate-button {
     transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
     -webkit-transition: all 0.3s ease;
     bottom: 30px;
}

JQUERY

$(document).ready(function() {

    //check whether a user scroll down to some pixels
    $(window).scroll(function() {
        if($(this).scrollTop() > 500) {
            $('.scroll-to-top').addClass('animate-button');
        }
        else {
            $('.scroll-to-top').removeClass('animate-button);
        }
    });

    //scroll to top
    $('.scroll-to-top').click(function() {
        $('html, body').animate({
            scrollTop: 0
        }, 800);
        return false;
    });

});

That is all about scroll to top by simply using Jquery and HTML/CSS. Hope you like it.

Please share…

Preetam Mallick Subscriber

Frontend Developer , Openweb Solutions

By profession I am a Frontend Developer at Openweb Solutions.

web

http://openwebsolutions.in/

preetam@openwebsolutions.in