LLWiki正在建设中,欢迎加入我们!
MediaWiki:Gadget-mobile-Backtotop.js
跳转到导航
跳转到搜索
注意:在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Internet Explorer:按住Ctrl的同时单击刷新,或按Ctrl-F5
- Opera:前往菜单 → 设置(Mac为Opera → Preferences),然后隐私和安全 → 清除浏览数据 → 缓存的图片和文件。
//<nowiki> // 由ResourceLoader直接调用,不可使用ES6语法 /** * @Function: 在桌面版和手机版的屏幕右方添加按钮,点击后滚动至页面顶部或底部,且页面的滚动位置会影响按钮显隐 * @Inspiration: CSS设计基于[[MW:Extension:MobileFrontend/zh]] Beta,JS基于[[moegirl:Mediawiki:gadget-Backtotop.js]] * @Dependency: ext.gadget.SettingsDialog * @Author: [[User:Bhsd]] */ "use strict"; /* global wgULS */ mw.gadgets.mobileBacktotop = $.extend( mw.storage.getObject( 'gadget-mobileBacktotop' ), mw.gadgets.mobileBacktotop ); const settings = mw.gadgets.mobileBacktotop, skin = mw.config.get( 'skin' ); settings.mode = settings.mode || ['vector', 'minerva']; settings.func = settings.func || ['top', 'bottom']; // 1. 设置本地化消息 mw.messages.set( $.extend( wgULS({ 'gadget-mb-label': '前往页面顶部或底部', 'gadget-cb-range': '使用范围', 'gadget-cb-d': '桌面版', 'gadget-cb-m': '手机版', 'gadget-mb-f': '启用功能', 'gadget-mb-top': '回到顶部' }, { 'gadget-mb-label': '前往頁面頂部或底部', 'gadget-cb-range': '使用範圍', 'gadget-cb-d': '桌面版', 'gadget-cb-m': '手機版', 'gadget-mb-f': '啟用功能', 'gadget-mb-top': '回到頂部' }), {'gadget-mb-bottom': '前往底部'}) ); // 2. 小工具设置 mw.settingsDialog.addTab({name: 'mobileBacktotop', label: 'gadget-mb-label', items: [ {key: 'mode', type: 'CheckboxMultiselect', label: 'gadget-cb-range', config: {options: [ {data: 'vector', label: mw.msg( 'gadget-cb-d' )}, {data: 'minerva', label: mw.msg( 'gadget-cb-m' )} ]} }, {key: 'func', type: 'CheckboxMultiselect', label: 'gadget-mb-f', config: {options: [ {data: 'top', label: mw.msg( 'gadget-mb-top' )}, {data: 'bottom', label: mw.msg( 'gadget-mb-bottom' )} ]} } ], help: '回到顶部'}); // 一个页面只需要执行一次 $(function() { if (!settings.mode.includes( skin )) { return; } const $body = $(document.scrollingElement), $win = $(window), $doc = $(document); // 3. 回到顶部 if (settings.func.includes( 'top' )) { const $toTop = $('<div>', {class: "backtotop view-border-box", html: $('<div>', {class: "arrow-up"})}) .click(function() { $body.animate({scrollTop: 0}); }).appendTo( document.body ), // 使用mw.util.debounce()方法降低函数调用频率 scrollToTop = mw.util.debounce(400, function() { $toTop.toggleClass('visible', $doc.scrollTop() > 260); }); // 人为触发一次scroll事件以初始化 $win.scroll( scrollToTop ).scroll(); } // 4. 前往底部 if (settings.func.includes( 'bottom' )) { const $toBottom = $('<div>', {class: "backtotop backtobottom view-border-box", html: $('<div>', {class: "arrow-up"})}).click(function() { // $doc.height() - $win.height()相当于FireFox独有的window.scrollMaxY $body.animate({scrollTop: $doc.height() - $win.height()}); }).appendTo( document.body ), scrollToBottom = mw.util.debounce(400, function() { $toBottom.toggleClass('visible', $doc.scrollTop() < $doc.height() - $win.height() - 260); }); $win.scroll( scrollToBottom ).scroll(); // 唤起一个Hook事件供TalkHelper小工具修改按钮的功能 mw.hook( 'to.bottom' ).fire( $toBottom ); } }); //</nowiki> // [[category:阅读工具]] [[category:默认开启的小工具]] [[category:作为模块的小工具]] [[category:桌面版小工具]] [[category:手机版小工具]] // {{DEFAULTSORT:mobile-Backtotop.js}}