jQuery自定义插件之返回顶部

更多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;
    width: 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;
    width: 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 ：滚动条距离顶部高度，显示返回顶部按钮,如果用户传入的值不能转换成数值，将使用此默认值。默认为 100
addStyle：是否给按钮添加样式，false时只会给目标元素加点击返回顶部的效果，按钮会一直显示，不会在顶部时隐藏，设置为true，class、bottom、right的值才会生效，默认是false
class：按钮显示时候追加的className，默认为 'gototop-active'
bottom：返回顶部按钮距离可视区下面的距离,如果用户传入的值不能转换成数值，将使用此默认值，默认为 30
right：返回顶部按钮距离可视区右面的距离,如果用户传入的值不能转换成数值，将使用此默认值，默认为 30
speed：返回顶部的动画时间,如果用户传入的值不能转换成数值，将使用此默认值，默认为 300