Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • JQuery Simple Scroll To Top

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 354
    Comment on it

    In this tutorial, you will learn that how to add scroll to top in any of the page. As we see in many websites the scroll top function. Its very helpful for users to go to the top of the page automatically without scrolling. It appears when the person scroll down the page and disappear when the visitor is already on the top of the page.

    You can do this by applying some JavaScript code and CSS code .

    Here is the JavaScript code you can use for scroll to top ->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){  
        //fade in/out based on scrollTop value
        $(window).scroll(function () {
            if ($(this).scrollTop() > 0) {
                $('#scroller').fadeIn();
            } else {
                $('#scroller').fadeOut();
            }
        });
     
        // scroll body to 0px on click
        $('#scroller').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 400);
            return false;
        });
    });
    </script>

     

    This is the CSS code below for the scroll to top button.

     

    <style>
    #scroll{
        position: fixed;   
        /**position the scroller**/
        bottom: 30px;  
        /**arrow image**/
        background: transparent url(put scoll top png url) no-repeat left top; 
        width: 32px;
        height: 32px;
        cursor: pointer;
        /**hide it first**/
        display:none;
    }
    </style>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: