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