前言

今天在网上搜索“回到顶部”的 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"});//opacitygoupa.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 相同的目录）：

谢谢浏览！

转载于:https://www.cnblogs.com/Music/p/jquery-plugin-jquery-goup.html

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

收藏10款最新流行的 jQuery 插件
我们经常给网站设计人员和开发人员分享有用的网站,工具和插件.今天的文章中,我们为大家带来了最近发布的 jQuery 插件,对于你即将到来的项目可能是真正有用的.这是10款最新流行的 jQuery 插件 ...
html5向上向下兼容插件,Sticky Header-兼容IE8的页面顶部固定jQuery插件
sticky-header.js是一款非常实用的兼容IE8+浏览器的页面顶部固定jQuery插件.该页面顶部固定插件可以通过参数来控制header元素的样式及固定效果,并且提供了丰富的回调函数. 使用 ...
jQuery插件：Validation中success和submitHandler两个方法的区别
jQuery插件:Validation中success和submitHandler两个方法的区别 http://www.mzwu.com/article.asp?id=3357 先执行onsubmit ...
6月10款超赞的jQuery插件新鲜出炉
51CTO推荐专题:jQuery给力插件大阅兵 1. Chrome Style jQuery Image Gallery 一款用于实现漂亮的Chrome风格图片画廊的 jQuery 插件,在线演示 2 ...
12款经典图片轮播jquery插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
20款超炫的Jquery插件
jQuery是开发者的福音.2006年8月jQuery发布之前,Web开发者经历着痛苦的开发过程.从简单的菜单栏到复杂的内容滚动条,所有的功能都需要开发者亲自开发,且花费比现在更多的时间.经历过没有j ...
6款帮助滚动视差jquery插件
在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果.下面是一些运用视差滚动效果的优秀网 ...
jQuery插件-支持天干地支阴历阳历万年历节假日红字显示记事等功能的日历插件(1)...
要求: jQuery1.4以上就行了. 用途: 可以支持天干地支,阴历,阳历,万年历,节假日红字显示,记事,等功能,有些老外也开发了这个日历插件,可是很不幸,他们不懂中国的老黄历以及<易经> ...
[置顶] 推荐一款好用的jquery弹出层插件——wbox
在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点和新版本增加的功能 wBox特点背景透明度可以根据实际情况进行调节可以根据需要添加wBox标 ...

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

前言