BackToTop “返回顶部” 页面组件

[size=medium]不知什么时候开始，流行起页面往下滚、往下滚、无底的往下滚的设计，
之后，一键返回页面顶部的需求变成一个很平常的需求，很多地方都需要用到。[/size]

[size=medium]今天我也遇到了一个这样子的需求，就随便google了一下，发现一个还不错的代码：[/size]
[url]http://www.cnblogs.com/lanmiao/articles/2248053.html[/url]
[size=medium]很简洁好用[/size] :idea:

[size=medium]花了不到5分钟的时候，把它小改了一下，改成 jQuery plugin，挺方便的[/size] :wink:
[size=medium]在此先谢了原作者。[/size]

[size=medium]需要用到的样式：[/size]

.backToTop {
    width: 100px;
    z-index: 10;
    border: 1px solid #333;
    background: #121212;
    text-align: center;
    padding: 5px;
    position: fixed;
    bottom: 0px;
    right: 0px;
    cursor: pointer;
    display: none;
    color: #fff;
    text-transform: lowercase;
    font-size: 0.9em;
}

/**
 * jQuery BackToTop plugin 返回顶部 
 * 
 * 2013-01-23
 * 
 * @require jQuery
 * @require backToTop.css
 * @link 参考自 http://www.cnblogs.com/lanmiao/articles/2248053.html
 * 
 * eg:    $('html').createBackToTop();
 *     或 $('body').createBackToTop();
 *     或 $( window ).createBackToTop();
 * 
 */
;(function( win ){

    var _win = win, _doc = _win.document, $ = _win.jQuery;

    $.fn.createBackToTop = function() { 
        var scrollDiv = _doc.createElement('div');
        $(scrollDiv).addClass('backToTop').html( '\u8FD4\u56DE\u9876\u90E8' ).appendTo('body'); // window.escape('返回顶部') 
        $( _win ).scroll(function() { 
            if ($(this).scrollTop() != 0) {
                $('.backToTop').fadeIn();
            } else {
                $('.backToTop').fadeOut();
            }
        });
        $('.backToTop').click(function() {
            $('body,html').animate({ scrollTop: 0 }, 800);
        });
    };

    /**
     * 判断当前元素是否存在
     * 
     * @return {Boolean} true 代表存在
     */
    $.fn.isExist = function() {
        return ( $(this).length > 0 );
    };

})( window );

[size=medium]该插件，还有待改进的地方，大概如下：
（1）“返回顶部”的颜色、字体、是否显示文字等，应该是可以灵活配置的；
（2）插件显示在页面的位置，也应该是可配置的；
（3）还应该有一个“去到底部”的插件。[/size]