jQuery自定義外掛程式之返回頂部

2022-09-17 17:57:15 字數 1440 閱讀 9571

返回網頁頂部效果是最常見不過的外掛程式了,所以寫乙個自用的返回頂部外掛程式外掛程式,偷懶一下。

上原始碼,想用的直接複製走,儲存在乙個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) option 可選引數

*/'gototop': function(option),

opts = $.extend({}, defaults, option);

// 遍歷外掛程式物件,防止多個效果同步bug

return this.each(function () ,

// 規範初始化引數

'initprop': function());

}// 規範規範引數,防止手殘輸入錯誤,輸入錯誤則恢復成外掛程式預設值

this.speed = number(this.speed) || this.defaults.speed;

},// 按鈕點選事件

'click': function(), opts.speed);

return false;

});},

// 切換返回按鈕顯示效果

'scroll': function()else

});}}};

// 初始化外掛程式

gototop.init();

});}

});})(window,jquery);

案例測試布局:

當前焦點是:

選項卡11

選項卡22

選項卡33

選項卡44

選項卡55

內容111

內容222

內容333

內容444

內容555

選項卡11

選項卡22

選項卡33

選項卡44

選項卡55

內容111

內容222

內容333

內容444

內容555

在頁面中引入jquery和jquery.gototop.js檔案(根據專案目錄引入必要檔案)。

使用乙個元素作為外掛程式的容器。

在頁面dom元素載入完畢之後,通過gototop()方法來初始化該外掛程式。

$(function());

});

該外掛程式的可用配置引數有:

jQuery自定義外掛程式之吸頂條效果

jquery自定義外掛程式之吸頂條效果是網頁中最常見不過的外掛程式了,所以寫乙個自用的jquery自定義外掛程式之吸頂條效果外掛程式,偷懶一下。上原始碼,想用的直接複製走,儲存在乙個js檔案即可使用。author jiaoshou date 2020 07 09 16 46 34 last modi...

jquery自定義外掛程式

jquery自定義外掛程式的幾種常用的方法 第一種方法 fn.fun function target fun 第二種方法 fn.extend target fun 第三種方法 extend fun 在這裡需要詳細解釋一下jquery的api extend var obj1 var obj2 var ...

jquery自定義外掛程式

實現方法 jquery為開發外掛程式提拱了兩個方法,分別是 jquery.fn.extend object 給jquery物件新增方法。jquery.extend object 為擴充套件jquery類本身.為類新增新的方法,可以理解為新增靜態方法。這兩個方法都接受乙個引數,型別為object,ob...