Scroll to top with jQuery


Today I will tell you about scroll to top method.

Earlier it was very difficult and not very fancy like we had used Anchors, I hope you remember.

Anchors are used to enable links to a specific location on a page. Anchor links can be especially useful when navigating between sections of a long document, or when you want to link to a segment of a page instead of the top of the page.

But now days Top Scroll method are more successful. Please see how can we implement it

  <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Scroll to top</title>
    <style type="text/css">
    #scroll-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        display: none;
    }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" >
    </script>
    <script type="text/javascript">
    $(document).ready(function(){        
        $(window).scroll(function(){            
            if ($(this).scrollTop() > 50) {
                $('#scroll-to-top').fadeIn();
            } else {
                $('#scroll-to-top').fadeOut();
            }            
        });
            
        $('#scroll-to-top a').click(function(){    
            $('body,html').animate({ scrollTop: 0 }, 600);
            return false;        
        });
    });
    </script>
    </head>
    
    <body>
    <div style="height:1000px;">&nbsp;</div>
    <div id="scroll-to-top"><a href="#">Top</a></div>
    </body>
    </html>

You can view the demo on this page. See the link at right bottom.
You can use images for the top link for better user experience.

Scroll to top with jQuery Scroll to top with jQuery Reviewed by JS Pixels on August 20, 2013 Rating: 5

No comments:

Altaf Web. Powered by Blogger.