更多jQuery常用插件使用请访问：jQuery常用插件汇总
返回网页顶部效果是最常见不过的插件了，所以写一个自用的返回顶部插件插件，偷懒一下。
上源码，想用的直接复制走，保存在一个js文件即可使用。
插件源码
/*
* @Author: JiaoShou
* @Date: 2020-07-09 16:46:16
* @Last Modified by: JiaoShou
* @Last Modified time: 2020-12-19 08:29:06
*/
;(function(window,$,undefined){
$.fn.extend({
/**
* 返回顶部插件
* @param {object} option 可选参数
*/
'gototop': function(option){
var defaults = {
scrollTop: 100, //滚动条距离顶部的距离,如果用户传入的值不能转换成数值，将使用此默认值
addStyle: false, //是否给按钮添加样式，false时只会给目标元素加点击返回顶部的效果，按钮会一直显示，不会在顶部时隐藏，设置为true，class、bottom、right的值才会生效，默认是false，
class: 'gototop-active', //显示时候追加的className
bottom: 30, //返回顶部按钮距离可视区下面的距离,如果用户传入的值不能转换成数值，将使用此默认值
right: 30, //返回顶部按钮距离可视区右面的距离,如果用户传入的值不能转换成数值，将使用此默认值
speed: 300 //返回顶部的动画时间,如果用户传入的值不能转换成数值，将使用此默认值
},
opts = $.extend({}, defaults, option);
// 遍历插件对象，防止多个效果同步bug
return this.each(function () {
var gototop = {
$el: $(this), //事件对象
defaults: defaults, //插件默认值
scrollTop: opts.scrollTop, //滚动条距离顶部的距离
addStyle: opts.addStyle, //是否给按钮添加样式，false时只会给目标元素加点击返回顶部的效果，按钮会一直显示，不会在顶部时隐藏，设置为true，class、bottom、right的值才会生效，默认是false，
class: opts.class, //显示时候追加的className
bottom: opts.bottom, //返回顶部按钮距离可视区下面的距离
right: opts.right, //返回顶部按钮距离可视区右面的距离
speed: opts.speed, //返回顶部的动画时间
// 初始化
'init': function(){
// 规范初始化参数
this.initProp();
//执行按钮点击事件
this.click();
// 执行切换返回按钮显示效果
this.scroll();
},
// 规范初始化参数
'initProp': function(){
// 规范规范参数,防止手残输入错误，输入错误则恢复成插件默认值
if (this.addStyle) {
this.scrollTop = Number(this.scrollTop) || this.defaults.scrollTop;
this.bottom = Number(this.bottom) || this.defaults.bottom;
this.right = Number(this.right) || this.defaults.right;
this.class = $.trim(this.class) || this.defaults.class;
// 渲染父级显示位置
this.$el.css({right:this.right, bottom:this.bottom});
}
// 规范规范参数,防止手残输入错误，输入错误则恢复成插件默认值
this.speed = Number(this.speed) || this.defaults.speed;
},
// 按钮点击事件
'click': function(){
// 存储this变量
var _this = this;
// 点击按钮，返回网页顶部
this.$el.click(function(){
$('html ,body').animate({scrollTop: 0}, opts.speed);
return false;
});
},
// 切换返回按钮显示效果
'scroll': function(){
// 存储this变量
var _this = this;
if (this.addStyle) {
// 鉴定页面滚动事件
$(window).scroll(function(){
//当window的scrollTop距离大于100时，显示返回按钮
if($(this).scrollTop() > opts.scrollTop){
_this.$el.addClass(_this.class);
}else{
_this.$el.removeClass(_this.class);
}
});
}
}
};
// 初始化插件
gototop.init();
});
}
});
})(window,jQuery);
案例测试布局：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>较瘦 - 博客园</title>
<style>
*{
margin: 0;
padding: 0;
}
.gototop {
position: fixed;
80px;
height: 80px;
bottom: 20px;
right: 20px;
z-index: 999999;
opacity: 0;
visibility: hidden;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.gototop a{
display: block;
100%;
height: 100%;
background: url(./images/gototop.png) rgba(0,0,0,.3);
background-size: contain;
}
.gototop.active {
opacity: 1;
visibility: visible;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
</style>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery.gototop.js"></script>
</head>
<body>
<p>当前焦点是：<i></i></p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<span>选项卡11</span>
<br/>
<span>选项卡22</span>
<br/>
<span>选项卡33</span>
<br/>
<span>选项卡44</span>
<br/>
<span>选项卡55</span>
<br/>
<div>内容111</div>
<br/>
<div>内容222</div>
<br/>
<div>内容333</div>
<br/>
<div>内容444</div>
<br/>
<div>内容555</div>
<br/>
<span>选项卡11</span>
<br/>
<span>选项卡22</span>
<br/>
<span>选项卡33</span>
<br/>
<span>选项卡44</span>
<br/>
<span>选项卡55</span>
<br/>
<div>内容111</div>
<br/>
<div>内容222</div>
<br/>
<div>内容333</div>
<br/>
<div>内容444</div>
<br/>
<div>内容555</div>
<!-- 返回顶部按钮 开始 -->
<div class="gototop j-gototop">
<a href="javascript:;"></a>
</div>
<!-- 返回顶部按钮 结束 -->
</body>
<script>
$(function () {
$('.j-gototop').gototop({addStyle: true});
});
</script>
</html>
插件使用方法
在页面中引入jquery和jquery.gototop.js文件(根据项目目录引入必要文件)。
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery.gototop.js"></script>
HTML结构
使用一个元素作为插件的容器。
<div class="gototop j-gototop">
<a href="javascript:;"></a>
</div>
初始化插件
在页面DOM元素加载完毕之后，通过gototop()方法来初始化该插件。
$(function(){
$('.j-gototop').gototop({addStyle: true});
});
插件配置参数
该插件的可用配置参数有：
scrollTop：滚动条距离顶部高度，显示返回顶部按钮,如果用户传入的值不能转换成数值，将使用此默认值。默认为100addStyle：是否给按钮添加样式，false时只会给目标元素加点击返回顶部的效果，按钮会一直显示，不会在顶部时隐藏，设置为true，class、bottom、right的值才会生效，默认是falseclass：按钮显示时候追加的className，默认为'gototop-active'bottom：返回顶部按钮距离可视区下面的距离,如果用户传入的值不能转换成数值，将使用此默认值，默认为30right：返回顶部按钮距离可视区右面的距离,如果用户传入的值不能转换成数值，将使用此默认值，默认为30speed：返回顶部的动画时间,如果用户传入的值不能转换成数值，将使用此默认值，默认为300