toTop插件（三）

前言

    当窗体内容过多会出现滚动， 点击回到顶部滚动条在在上边（大家都懂得，我语文学的不好，表达不清^_^）

 

看代码

CSS :

 .toTop{
    position: fixed;
    width: 50px;
    height: 50px;
    border: 1px solid red;
    right: 20px;
    bottom: 50px;
    display: none;
  }

 

toTop.js：插件部分

// 回到顶部插件
  ;(function ($, win) {
    var ToTop = function (ele, options) {
      // Dom对象
      this.$element = ele;
      // 默认参数
      this.defaults = {
        delayTime: 500,    // 默认延迟时间
        eventType: 'click', //默认click  可以替换成（mouseover，mouseenter ....）
        toTopCallback: function(){} // 顶部回调函数
      };
      // 整合参数 ,options要在最后
      this.settings = $.extend({},this.defaults, options);
    };

    ToTop.prototype = {
      init: function () {
        // _this 当前类对象
        var _this =this;
        this.gotoBtn();
        return this.$element.each(function(){
          $(window).scroll(function(){
            var sc = $(window).scrollTop();
            if(sc > 10){
              _this.$element.show();
            }else{
              _this.$element.hide();
            }
          })
        });
      },
      gotoBtn: function(){
        var _this = this;
          this.$element.on(this.settings.eventType, function(){
          var topV = $(window).scrollTop();
          // 'body,html' 
          $('html').animate({scrollTop: 0}, _this.settings.delayTime, function(){
            _this.settings.toTopCallback();
          });
        });
      }
    };

    // 插件名称
    $.fn.toTopFun = function(options){
      var toTopP = new ToTop(this,options);
      return toTopP.init();
    }
  })(jQuery, window);

 

页面使用

  $(function(){
    // 调用
    $('.toTop').toTopFun({
      delayTime: 800,
      toTopCallback: function(){
      alert('滚动到达顶部回调处理')
      }
    });
  })