Advanced Search

Return to Snippet

Revision: 55584
at February 12, 2012 12:38 by thewickedchemist
Initial Code 
$(document).ready(function() {

    // hide #back-top first
    $("#back-top").hide();

    // fade in #back-top
    $(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});​


HTML USAGE:

<p id="back-top" style="display: block; ">
   <a href="#top"><span></span><em>Back to top</em></a>
</p>
Initial URL 
http://www.pixeltweaks.com
Initial Description 
Hides the button based on scroll position, fades in and out as necessary and upon click smoothly scrolls back to the top.
Initial Title 
Smooth Scroll to Top Function
Initial Tags 
jquery
Initial Language 
jQuery