【JS插件】回到顶部的按钮

大部分社交网站都有一个点击可以回到顶部的按钮, 这里我做了一个JQuery插件, 代码比较简单, 是我做JQuery插件的尝试.

我把代码放到github了: 传送门

使用例子:

$("#scrolltop").scrolltop({
            right: "7%",
            bottom: "30px"
          });

插件代码:

/*
作者:张方雪
日期: 2014-2-17
功能: 创建一个可以让页面滚动到顶部的按钮, 常见于各种社交网站的微博列表.
备注: DOM被设置成了浮动的, 用户可以自己设定位置, 传入right, bottom参数即可
      还可以配置滚到条到多高的时候会显示插件图标.
*/
(function ($) {
    $.fn.scrolltop = function (options) {
        var opts = $.extend({}, $.fn.scrolltop.defaults, options);
        return this.each(function () {
            var $this = $(this);
            $this.css("opacity", "0.3");
            $this.css("background", "url('../Images/top.png') no-repeat");
            $this.css("width", opts.width);
            $this.css("height", opts.height);
            $this.css("position", "fixed");
            $this.css("right", opts.right);
            $this.css("bottom", opts.bottom);
            $this.hover(
                function () {
                    $(this).css('opacity', '1.0');
                },
                function () {
                    $(this).css('opacity', '0.5');
                }
            );
            $this.click(function () {
                $(window).scrollTop(0);
            });
            $(window).scroll(function () {
                var scrollDist = $(window).scrollTop();
                if (scrollDist >= opts.heightThreshhold) { //当滚动条离顶部超过阈值的时候, 就显示
                    $this.css("display", "block");
                } else {
                    $this.css("display", "none");
                }
            });
        });
    };
    $.fn.scrolltop.defaults = {
        heightThreshhold: 1000,
        width: "50px",
        height: "50px",
        right: "8%",
        bottom: "30px"
    };

})(jQuery);

图片:

    

修订一版:增加了设置滚动速度的选项, topSpeed

代码如下:

/*
作者:张方雪
日期: 2014-2-17
功能: 创建一个可以让页面滚动到顶部的按钮, 常见于各种社交网站的微博列表.
备注: DOM被设置成了浮动的, 用户可以自己设定位置, 传入right, bottom参数即可
      还可以配置滚到条到多高的时候会显示插件图标.
*/
(function ($) {
    $.fn.scrolltop = function (options) {
        var opts = $.extend({}, $.fn.scrolltop.defaults, options);

        var run2top = function () {
            var scrollDist = $(window).scrollTop();
            scrollDist -= opts.topSpeed;
            if (scrollDist > 0) {
                $(window).scrollTop(scrollDist);
                setTimeout(run2top, 1);
            }
        };
        
        return this.each(function () {
            var $this = $(this);
            $this.css("opacity", "0.3");
            $this.css("background", "url('../Images/top.png') no-repeat");
            $this.css("width", opts.width);
            $this.css("height", opts.height);
            $this.css("position", "fixed");
            $this.css("right", opts.right);
            $this.css("bottom", opts.bottom);
            $this.hover(
                function () {
                    $(this).css('opacity', '1.0');
                },
                function () {
                    $(this).css('opacity', '0.5');
                }
            );
            $this.click(function () {
                //$(window).scrollTop(0);
                run2top();
            });
            $(window).scroll(function () {
                var scrollDist = $(window).scrollTop();
                if (scrollDist >= opts.heightThreshhold) { //当滚动条离顶部超过阈值的时候, 就显示
                    $this.css("display", "block");
                } else {
                    $this.css("display", "none");
                }
            });
        });
    };
    $.fn.scrolltop.defaults = {
        heightThreshhold: 1000,
        width: "50px",
        height: "50px",
        right: "8%",
        bottom: "30px",
        topSpeed: 50
    };
})(jQuery);

 2014-2-26 修订:

/*
* 作者:张方雪
* 功能: 创建一个可以让页面滚动到顶部的按钮, 常见于各种社交网站的微博列表.
* 修改时间: 2014-2-26
* 备注: DOM被设置成了浮动的, 用户可以自己设定位置, 传入right, bottom参数即可
      还可以配置滚到条到多高的时候会显示插件图标.
*/
(function ($) {
    $.fn.scrolltop = function (options) {
        var opts = $.extend({}, $.fn.scrolltop.defaults, options);

        var run2top = function () {
            var scrollDist = $(window).scrollTop();
            if (scrollDist > 0) {
                scrollDist -= opts.topSpeed;
                scrollDist = Math.max(scrollDist, 0);
                $(window).scrollTop(scrollDist);
                setTimeout(run2top, 1);
            }
        };

        return this.each(function () {
            var $this = $(this);
            $this.css("opacity", "0.3");
            $this.css("background", "url('../Images/top.png') no-repeat");
            $this.css("width", opts.width);
            $this.css("height", opts.height);
            $this.css("position", "fixed");
            $this.css("right", opts.right);
            $this.css("bottom", opts.bottom);
            $this.hover(
                function () {
                    $(this).css('opacity', '1.0');
                },
                function () {
                    $(this).css('opacity', '0.5');
                }
            );
            $this.click(function () {
                //$(window).scrollTop(0);
                run2top();
            });
            $(window).scroll(function () {
                var scrollDist = $(window).scrollTop();
                if (scrollDist >= opts.heightThreshhold) { //当滚动条离顶部超过阈值的时候, 就显示
                    $this.css("display", "block");
                } else {
                    $this.css("display", "none");
                }
            });
        });
    };
    $.fn.scrolltop.defaults = {
        heightThreshhold: 1000,
        width: "50px",
        height: "50px",
        right: "8%",
        bottom: "30px",
        topSpeed: 50
    };
})(jQuery);