facebook

Scroll to top of a website using Jquery

By Preetam Mallick

banner-goto-top

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 Administrator
Frontend Developer , Openweb Solutions

By profession I am a Frontend Developer at Openweb Solutions.

Frontend developer at Openweb Solutions
Posts created 14

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
shares