代码改变世界

一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部

2019-04-29 14:42  音乐让我说  阅读(644)  评论(0)  编辑  收藏  举报

前言

今天在网上搜索“回到顶部”的 jQuery 插件，网上有很多，但是大部分都不支持让 Div 中的滚动条回到顶部。于是乎，不放弃，自己参考 Github 上的一个 jQuery 插件，经过自己的修改，终于让它支持了。

 

运行效果

口说无凭，写贴效果图：

这是当滚动条处于最顶部时，会自动隐藏“回到顶部”的按钮。

 

下图是当滚动条往下滚动到一定的距离（PS：这个距离可以配置），会自动出现“回到顶部”的图标。备注：这个图标的地址也可以配置。

 

下面是带滚动条的 DIV 的效果。 

点击看大图

 

代码

jquery.goup.js  插件代码：

// https://github.com/rogervila/jquery-GoUP-plugin
// 笔者（http://music.cnblogs.com）已经修改了一些代码，和原来的有区别，请注意！

(function ($) {
    var defaultImgsrc = "http://goo.gl/VDOdQc";
    var defaultImgWidth = 72;
    if (typeof (document.scripts) != 'undefined') {
        var js = document.scripts;
        var currentJsPath = js[js.length - 1].src.substring(0, js[js.length - 1].src.lastIndexOf("/") + 1);
        defaultImgsrc = currentJsPath + "back_to_top_white.gif";
        defaultImgWidth = 38;
    }
    $.fn.goup = function (options) {
        $.fn.goup.defaultOpts = {
            alwaysAppear: false,
            scrollTopContainner: null,
            appearFromTop: 200,
            scrollTime: 500,
            imgSrc: defaultImgsrc, //it works with short urls
            width: defaultImgWidth,
            place: "bottom-right",
            fadein: 500,
            fadeout: 500,
            opacity: 0.8,
            marginX: 2,
            marginY: 2
        };
        var opts = $.extend({}, $.fn.goup.defaultOpts, options);
        return this.each(function () {
            var goup = $(this);
            goup.html("<a><img /></a>");
            //var goupa = $('#goup a'),
            //    goupimg = $('#goup a img');
            var goupa = goup.find("a");
            var goupimg = goupa.find("img");
            //width
            goup.css({
                "position": "fixed",
                "display": "block",
                "width": "'" + opts.width + "px'",
                "z-index": "9"
            });
            //opacity
            goupa.css("opacity", opts.opacity);
            goupimg.attr("src", opts.imgSrc);
            goupimg.width(opts.width);
            if (!opts.alwaysAppear) {
                goupimg.hide();
            }
            var jContainner;
            var jWinObj;
            if (opts.scrollTopContainner) {
                jContainner = opts.scrollTopContainner;
                jWinObj = jContainner;
            }
            else {
                jContainner = $('body,html');
                jWinObj = $(window);
            }
            //appearFromTop, fadein, fadeout
            $(function () {
                if (!opts.alwaysAppear) {
                    jWinObj.scroll(function () {
                        if ($(this).scrollTop() > opts.appearFromTop) {
                            goupimg.fadeIn(opts.fadein);
                        } else {
                            goupimg.fadeOut(opts.fadeout);
                        }
                    });
                }
                //hover effect
                $(goupa).hover(function () {
                    $(this).css("opacity", "1.0");
                    $(this).css("cursor", "pointer");
                }, function () {
                    $(this).css("opacity", opts.opacity);
                });
                
                //scrollTime
                $(goupa).click(function () {
                    jContainner.animate({
                        scrollTop: 0
                    }, opts.scrollTime);
                    return false;
                });
            });
            //place, marginX, marginY: 
            if (opts.place === "top-right") {
                goup.css({
                    "top": opts.marginY + "%",
                    "right": opts.marginX + "%"
                });
            } else if (opts.place === "top-left") {
                goup.css({
                    "top": opts.marginY + "%",
                    "left": opts.marginX + "%"
                });
            } else if (opts.place === "bottom-right") {
                goup.css({
                    "bottom": opts.marginY + "%",
                    "right": opts.marginX + "%"
                });
            } else if (opts.place === "bottom-left") {
                goup.css({
                    "bottom": opts.marginY + "%",
                    "left": opts.marginX + "%"
                });
            } else {
                goup.css({
                    "bottom": opts.marginY + "%",
                    "right": opts.marginX + "%"
                });
            }
        });
    };
})(jQuery);

 

 

简单 Demo 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="resources/scripts/jquery-1.10.1.min.js"></script>
    <script src="resources/plugins/jquery-GoUP/jquery.goup.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#goup3').goup({
                //alwaysAppear: false, /* 是否“回到顶部”图标总是出现，即：不隐藏 */
                //scrollTopContainner: null, /* 该滚动条是否是 DIV 中的滚动条，如果是，请传入比如：$("#DivId") */
                //appearFromTop: 200, /* 距离顶部多少像素就出现 */
                //scrollTime: 500,/* 滚动到顶部花费的时间（毫秒数） */
                ////imgSrc: 'resources/plugins/jquery-GoUP/back_to_top_white.gif',
                //place: "bottom-right",
                //fadein: 500,
                //fadeout: 500,
                //opacity: 0.8,
                //marginX: 2,
                //marginY: 2
            });
        });
    </script>
</head>
<body>
    <div id='goup3'></div>
    <h1>文本</h1>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <br /><br /><br /><br /><br /><br /><br />
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <br /><br /><br /><br /><br /><br /><br />
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <br /><br /><br /><br /><br /><br /><br />
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
</body>
</html>

 

带滚动条的 DIV 的 Demo

<script type="text/javascript">
    $(document).ready(function () {
        $('#goup').goup({
            alwaysAppear: false,
            scrollTopContainner:$("#reportDiv"),
            marginX: 5,
            marginY: 15
        });
    });
</script>

<div id="reportDiv" style="overflow-y:scroll; ">
    <div id='goup'></div>
    <h1>文本</h1>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <br /><br /><br /><br /><br /><br /><br />
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <br /><br /><br /><br /><br /><br /><br />
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <br /><br /><br /><br /><br /><br /><br />
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
    <p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p><p>水电费收费</p>
</div>

 

图标（备注：请下载下面这个图标，然后重命名为 back_to_top_white.gif，然后放到和 jquery.goup.js 相同的目录）：

 

 

 

谢谢浏览！