Micro Jquery Autoscroll

by bitstarr

HTML

<h1>Thanks to <a href="http://kyo-tux.deviantart.com/">Kyo-Tux</a> for Icon.</h1>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie semper sapien, ac aliquam massa dapibus pretium. Cras rhoncus accumsan nisl, nec semper nisi pretium nec. Fusce blandit pharetra leo, non faucibus lectus molestie eu. Duis pretium massa bibendum enim suscipit porta. Aliquam non urna in enim iaculis pretium. Pellentesque elit enim, mattis sit amet ornare at, venenatis sit amet justo. Suspendisse eu dui purus, ac tincidunt quam. In nisl lorem, viverra eget hendrerit quis, iaculis vitae turpis. Fusce sed lacus eget eros vestibulum tempus. Phasellus cursus commodo lectus, ut interdum dolor iaculis in. Morbi rhoncus velit non nunc tincidunt congue. Nunc blandit neque nec eros viverra congue. Donec erat erat, faucibus nec porta ut, ultricies ut diam. Donec non sapien leo. Suspendisse consectetur laoreet sapien ac vestibulum. Aenean tempor ipsum a magna faucibus tincidunt. Mauris condimentum nisi vitae augue tempus vehicula. In ligula ipsum, aliquet commodo elementum non, auctor eget est. Integer lobortis iaculis iaculis. Morbi nibh lectus, ultricies vel tincidunt ac, congue faucibus mauris.
</p><p>
Sed in metus leo, ut auctor libero. In varius velit sagittis eros ultrices tristique. Mauris egestas massa in ligula posuere mollis. Nulla felis est, egestas non egestas id, faucibus in elit. Curabitur vel interdum felis. Mauris tempus orci in massa tincidunt aliquam. Etiam a purus diam, a commodo risus. Fusce tempus nunc sit amet ante convallis at auctor eros dapibus. Ut non justo id velit accumsan laoreet. Nunc aliquet justo ante, id eleifend sapien. Suspendisse in urna mauris. Phasellus at lectus at libero venenatis placerat. Vivamus rhoncus leo ligula.
</p><p>
Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean fringilla enim sed tortor posuere nec mattis elit gravida. Integer gravida, diam in varius laoreet, dui ipsum dictum augue, a convallis lacus...

CSS

.scroll-to-top-button{
    background: #666 url(http://cdn.iconfinder.net/data/icons/minicons/Png/Upload.png) center center no-repeat;
    width: 32px;
    height: 32px;
    color: #fff;
    font-family: verdana;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    cursor: pointer;
    padding: 15px;
    margin: 20px;
}

JavaScript

(function(jq) {
    jq.autoScroll = function(ops) {
        ops = ops || {};
        ops.styleClass = ops.styleClass || 'scroll-to-top-button';
        var t = jq('<div class="'+ops.styleClass+'"></div>'),
            d = jq(ops.target || document);
        jq(ops.container || 'body').append(t);

        t.css({
            opacity: 0,
            position: 'absolute',
            top: 0,
            right: 0
        }).click(function() {
            jq('html,body').animate({
                scrollTop: 0
            }, ops.scrollDuration || 1000);
        });

        d.scroll(function() {
            var sv = d.scrollTop();
            if (sv < 10) {
                t.clearQueue().fadeOut(ops.hideDuration || 200);
                return;
            }

            t.css('display', '').clearQueue().animate({
                top: sv,
                opacity: 0.8
            }, ops.showDuration || 500);
        });
    };
})(jQuery);


$(document).ready(function(){
    $.autoScroll({
        scrollDuration: 2000, 
        showDuration: 600, 
        hideDuration: 300
    });
});