Creating a Scroll To Top Element That Stays In View Using jQuery

I've seen some sites use an element at the bottom of each page that will smoothly scroll the user back to the top of the page.  On one site, I even saw this element float with you as you scroll down the page to always provide the option to return to the top.  Sounds like a neat concept, though not one I'll probably implement on this site.  I figured I'd take a shot at creating the functionality, what I came up with is listed below.

Demo Page

How we create the effect

Let's start with simple markup to give us a tall column and our element that will float with us:

    <div style="background: #339; float: left; height: 1000px; width: 600px;">
        nice tall column
    </div>
    <div id="goToTop" style="background: #f00; float: left; width: 80px;">
        click me to go to top
    </div>

Make sure the jQuery library is referenced from your page and add this in a script tag:

// cache the floating element
var $goToTop = $("#goToTop");
// bind to the window's scroll event to move the element with the user
$(window).bind("scroll", function() {
    $goToTop.stop().animate({ "marginTop": ($(window).scrollTop()) + "px" }, "slow");
});
// bind to the element's click event to scroll to the top of the page
$goToTop.bind("click", function(){
    $('html, body').animate({ scrollTop: 0 }, 'slow');
});

Viola!  An element that scrolls with us and will take us to the top of the page.  Well that felt too easy, and not so reusable so I rolled it up into a jQuery plugin.

To use the plugin add this code in a js file or a script tag:

// plugin code for scrollToTop effect and stayInView effect combined
(function($) {
    $.fn.stayInViewAndScrollToTop = function() {
        return this.each(function() {
            var $element = $(this);
            $(window).bind("scroll", function() {
                $element.stop().animate({ "marginTop": ($(window).scrollTop()) + "px" }, "slow");
            });
            $element.bind("click", function() {
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            });
        });
    };
})(jQuery);

Use the plugin like this:

$(document).ready(function() {
    $("#goToTop").stayInViewAndScrollToTop();
});

As a bonus, here are the scroll to top effect and the stay in view effect as their own plugins:

// plugin code for stayInView effect
(function($) {
    $.fn.stayInView = function() {
        return this.each(function() {
            var $element = $(this);
            $(window).bind("scroll", function() {
                $element.stop().animate({ "marginTop": ($(window).scrollTop()) + "px" }, "slow");
            });
        });
    };
})(jQuery);

// plugin code for scrollToTop effect
(function($) {
    $.fn.scrollToTop = function() {
        return this.each(function() {
            $(this).bind("click", function() {
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            });
        });
    };
})(jQuery);

jQuery really makes life easy on web devs and I will probably be creating a lot more of these plugins!