Your Internet Explorer is too old :( Please upgrade to latest IE or switch to Firefox/Google Chrome for better view!
IndiaAgainstCoronavirus
Join GiveIndia's fight against Coronavirus. Help them support the underprivileged with relief measures like food and sanitation kits, cash support and protective and life-saving equipment for hospitals and healthcare workers. Your contribution can help millions of people survive in these troubled times. The time to act is now, donate to save lives. indiafightscorona.giveindia.org

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