前端:页面快速置顶置底

来自istudylinux
Istudylinux讨论 | 贡献2022年11月20日 (日) 15:07的版本
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)

源码来源

MediaWiki:Gadget-scrollUpButton.js

功能

该源码实现的功能为在当前页面右下角添加置顶按钮和置底按钮。

可修改内容

  • 可以更改源码高亮的图片链接地址,默认使用中文维基百科的箭头图片。
  • 仅需要上箭头的图片

源码

注意

  1. 如果你安装了Extension:Gadget,你可以直接使用MediaWiki:Gadget-scrollUpButton.js作为脚本名称
  2. 如果你没有安装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);