前言

今天在网上搜索“回到顶部”的 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 相同的目录):

谢谢浏览!

一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部的更多相关文章

  1. 40款非常棒的 jQuery 插件和制作教程(系列一)

    jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象.jQuery以其插件众多.独特.轻量以及支持大规模的网站开发闻名 ...

  2. 10款最新流行的 jQuery 插件,值得你收藏

    10款最新流行的 jQuery 插件,值得你收藏 http://www.cnblogs.com/lhb25/p/10-new-popular-jquery-plugins-check.html 你应该 ...

  3. 过去几个月出炉的30款最喜欢的 jQuery 插件

    在这篇文章中,我们收集了一些在过去的几个月里最喜欢的 jQuery 插件.为了使您更容易搜索到自己喜欢的 jQuery 插件,我们已经对插件进行了分类: 页面布局插件,图片和视频插件,滑块和画廊,排版 ...

  4. 7 款超炫的 jQuery 插件

    jQuery大大简化了我们的前端代码,因为jQuery的简单和开源,也涌现出了层出不穷的jQuery插件,这些实用的jQuery插件也不断推动着jQuery开源社区的发展.下面精选了几款让人跃跃欲试的 ...

  5. div产生的滚动条返回顶部

    div产生的滚动条返回顶部 1.获取div js: let initialNode = document.getElementById("content") react: let ...

  6. vue 中<vue-scroll >滚动条回到顶部

    今天项目碰到一个<vue-scroll >滚动条要回到顶部的需求,查询了好久终于解决了,这里记录一下: 其实就是scrollIntoView()方法的使用(官方文档): 需要注意的是要求页 ...

  7. jQuery插件编写学习中遇见的问题--attr prop

    个人博客: https://chenjiahao.xyz 最近在学习jQuery的插件的编写,有两种方式,$.fn.extend以及$.extend,一种是作用于对象原型上,一种是直接作用于jQuer ...

  8. jQuery实现将div中滚动条滚动到指定位置的方法

    1.JS代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainCo ...

  9. 2014优秀的好用的20款免费jQuery插件推荐

    2013 年最好的 20 款免费 jQuery 插件,世界买家网 www.buyerinfo.biz在这里分享给大家 这些插件对设计者和开发者都有很大的帮助,希望大家能够喜欢:) 现 今互联网市场上提 ...

随机推荐

  1. Linux2:Linux目录结构

    Linux目录图 进入根目录,使用ll命令看一下Linux整个根目录图: 这里面所有的目录都是买完服务器之后最初始的目录,没有进过任何加工.Linux以树的结构组织所有目录,用一张图表示一下Linux ...

  2. Java Socket聊天室编程(一)之利用socket实现聊天之消息推送

    这篇文章主要介绍了Java Socket聊天室编程(一)之利用socket实现聊天之消息推送的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 网上已经有很多利用socket实现聊天的例子了 ...

  3. Activity 之使用

    Activity 之使用 本文内容 1. 使用 Activity 显式简单界面 2. Activity 之间的跳转 2.1 startActivity 2.3 startActivityForResu ...

  4. Leetcode 题解

    Leetcode Solutions Language: javascript c mysql Last updated: 2019-01-04 https://github.com/nusr/lee ...

  5. 我的2018OKR年终回顾与2019OKR初步规划

    转眼一年又过去了,在这个年底的时候,按照国际惯例,又到了重新回顾审视一下这一年来的得失,规划一下明年的奋斗方向的时候了.因此,我继续使用OKR来给自己做Review和Planning,也希望自己能够保 ...

  6. vue工程利用pubsub-js实现兄弟组件之间的通信

    前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...

  7. [深度应用]·首届中国心电智能大赛初赛开源Baseline(基于Keras val_acc: 0.88)

    [深度应用]·首届中国心电智能大赛初赛开源Baseline(基于Keras val_acc: 0.88) 个人主页--> https://xiaosongshine.github.io/ 项目g ...

  8. Python:鲜为人知的功能特性(下)

    GitHub 上有一个名为<What the f*ck Python!>的项目,这个有趣的项目意在收集 Python 中那些难以理解和反人类直觉的例子以及鲜为人知的功能特性,并尝试讨论这些 ...

  9. Python:说说字典和散列表,散列冲突的解决原理

    散列表 Python 用散列表来实现 dict.散列表其实是一个稀疏数组(总是有空白元素的数组称为稀疏数组).在一般书中,散列表里的单元通常叫做表元(bucket).在 dict 的散列表当中,每个键 ...

  10. JAVA线程池学习,ThreadPoolTaskExecutor和ThreadPoolExecutor有何区别?

    初学者很容易看错,如果没有看到spring或者JUC源码的人肯定是不太了解的. ThreadPoolTaskExecutor是spring core包中的,而ThreadPoolExecutor是JD ...