前端:页面快速置顶置底:修订间差异
来自istudylinux
Istudylinux(讨论 | 贡献) 无编辑摘要 |
Istudylinux(讨论 | 贡献) 无编辑摘要 |
||
(未显示同一用户的4个中间版本) | |||
第10行: | 第10行: | ||
== 源码 == | == 源码 == | ||
=== 注意 === | |||
# 如果你安装了Extension:Gadget,你可以直接使用<code>MediaWiki:Gadget-scrollUpButton.js</code>作为脚本名称 | |||
# 如果你没有安装Gadget扩展,则将下面的代码复制到<code>MediaWiki:Common.js</code> | |||
=== MediaWiki:Gadget-scrollUpButton.js === | === MediaWiki:Gadget-scrollUpButton.js === | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="JavaScript" line="true" highlight="16,18"> | ||
/* scrollUpButton | /* scrollUpButton | ||
* Add a button to scroll up to the top of the current page. | * Add a button to scroll up to the top of the current page. | ||
第91行: | 第95行: | ||
})(jQuery, mw); | })(jQuery, mw); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
[[分类:前端]] | [[分类:前端]] | ||
[[分类:仓库]] | [[分类:仓库]] |
2022年11月20日 (日) 15:07的最新版本
源码来源
MediaWiki:Gadget-scrollUpButton.js
功能
该源码实现的功能为在当前页面右下角添加置顶按钮和置底按钮。
可修改内容
- 可以更改源码高亮的图片链接地址,默认使用中文维基百科的箭头图片。
- 仅需要上箭头的图片
源码
注意
- 如果你安装了Extension:Gadget,你可以直接使用
MediaWiki:Gadget-scrollUpButton.js
作为脚本名称 - 如果你没有安装Gadget扩展,则将下面的代码复制到
MediaWiki:Common.js
MediaWiki:Gadget-scrollUpButton.js
/* scrollUpButton
* Add a button to scroll up to the top of the current page.
* @rev 3 (2019-28-07)
* @author Kwj2772
* @contributor Perhelion
* No internationalisation required
* [kowiki] Fixed an issue with help-panel-button ([[ko:User:ykhwong]])
* [zhwiki] Add a timer to autohide button, check more gadgets. Add scrollDownButton
* @from https://ko.wikipedia.org/?oldid=25440719
* @maintainer 安忆 ([[zh:User:AnYiLin]])
*/
(function($, mw) {
var scrollDownButtonId = 'scrollDownButton-zhwiki',
scrollUpButtonId = 'scrollUpButton-zhwiki';
var scrollButtonIcon = '//upload.wikimedia.org/wikipedia/commons/5/59/Font_Awesome_5_regular_arrow-circle-up_blue.svg';
if (!document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Image', '1.1'))
scrollButtonIcon = '//upload.wikimedia.org/wikipedia/commons/thumb/5/59/Font_Awesome_5_regular_arrow-circle-up_blue.svg/32px-Font_Awesome_5_regular_arrow-circle-up_blue.svg.png';
$scrollDownButton = $('<img>', {
src: scrollButtonIcon,
id: scrollDownButtonId,
class: 'noprint',
}).css({
cursor: 'pointer',
opacity: 0.7,
position: 'fixed',
display: 'none',
right: '18px',
transform: 'rotate(180deg)',
'user-select': 'none'
}).on('click', function() {
$('html, body').animate({
scrollTop: $(document).height() - $(window).height()
}, 660)
}).on('mouseenter mouseleave', function(e) {
this.style.opacity = e.type === 'mouseenter' ? 1 : 0.7
}).attr('draggable', 'false').appendTo('body');
$scrollUpButton = $('<img>', {
src: scrollButtonIcon,
id: scrollUpButtonId,
class: 'noprint',
}).css({
cursor: 'pointer',
opacity: 0.7,
position: 'fixed',
display: 'none',
right: '18px',
'user-select': 'none'
}).on('click', function() {
$('html, body').animate({
scrollTop: 0
}, 660)
}).on('mouseenter mouseleave', function(e) {
this.style.opacity = e.type === 'mouseenter' ? 1 : 0.7
}).attr('draggable', 'false').appendTo('body');
var scrollButtonTimer;
$(window).on('scroll', function() {
var dingHeight = $('#bluedeck_ding>div').height() ? $('#bluedeck_ding>div').height() : 0;
$scrollDownButton.css('bottom', dingHeight + 24 + 'px');
$scrollUpButton.css('bottom', dingHeight + 65 + 'px');
(mw.config.get('wgGEHelpPanelEnabled') && $('#mw-ge-help-panel-cta-button').length > 0) || $('#cat_a_lot').length > 0 || $('#proveit').length > 0 || $('.wordcount').length > 0 ? $scrollDownButton.css('left', '10px') && $scrollUpButton.css('left', '10px') : $scrollDownButton.css('left', 'unset') && $scrollUpButton.css('left', 'unset');
$(this).scrollTop() > 60 ? $scrollDownButton.fadeIn('slow') && $scrollUpButton.fadeIn('slow') : $scrollDownButton.fadeOut('slow') && $scrollUpButton.fadeOut('slow');
this.clearTimeout(scrollButtonTimer);
scrollButtonTimer = this.setTimeout(function() {
$scrollDownButton.fadeOut('slow');
$scrollUpButton.fadeOut('slow')
}, 2000)
});
$scrollDownButton.on('mouseenter', function() {
window.clearTimeout(scrollButtonTimer)
});
$scrollUpButton.on('mouseenter', function() {
window.clearTimeout(scrollButtonTimer)
})
})(jQuery, mw);