Your Internet Explorer is too old :( Please upgrade to latest IE or switch to Firefox/Google Chrome for better view!
New Year's Eve Countdown
Days
000
:
Hours
00
:
Minutes
00
:
Seconds
00

July 29, 2013

jQuery Smooth Scroll to Top Button

Without taking your too much time I'll first let you know, this button is simple anchor tag and clicking on this will take user to top of your web page. Perhaps user can prefer space-bar but still useful for some users.

By default in HTML you can put an anchor tag with href value of #top it works fine, to make it more decorative you need to put few lines of jQuery so it will smoothly scroll the window to top.

I am using jQuery to animate the window so you need to include jQuery at your web page.
if you don't have get it from here http://jquery.com/download/


JS
jQuery(document).ready(function(){
    /* Only hide link if js is enable */
    jQuery('#scg-jump2top').hide();
    
    /* hide link if user is already on top */
    jQuery( window ).scroll(function(){
        if (jQuery(this).scrollTop() > 300)
            jQuery('#scg-jump2top').fadeIn();
        else
            jQuery('#scg-jump2top').fadeOut();
    });
    
    /* jump to top */
    jQuery('#scg-jump2top').click(function(e){
        e.preventDefault();
        jQuery("html, body").animate({ scrollTop : 0 }, 600);
    });
});


Complete Working Example
 

Comment your suggestions and queries :)

0 comments:

Post a Comment