Gadget:oouiup.js:修订间差异

(// Edit via Wikiplus)
(// Edit via Wikiplus)
 
(未显示同一用户的3个中间版本)
第3行: 第3行:
html = document.documentElement;
html = document.documentElement;
const innerWidth = window.innerWidth;
const innerWidth = window.innerWidth;
let scrollbarWidth;
var scrollbarWidth;
if($(".backToTop").length > 0) { // 已经加载了仿论坛版本
if($(".backToTop").length > 0) { // 已经加载了仿论坛版本
return;
return;
第22行: 第22行:
const btnObj = new OO.ui.ButtonWidget( {
const btnObj = new OO.ui.ButtonWidget( {
icon: 'collapse',
icon: 'collapse',
label: 'ABC',
label: '返回顶部',
title: 'TIT',
title: '返回顶部',
invisibleLabel: true,
invisibleLabel: true,
classes: [ 'backToTop' ]
classes: [ 'backToTop' ]
第45行: 第45行:
}
}
};
};
window.onscroll();
} );
} );

2023年7月30日 (日) 18:18的最新版本

$( function () {
	const body = document.body,
		html = document.documentElement;
	const innerWidth = window.innerWidth;
	var scrollbarWidth;
	if($(".backToTop").length > 0) { // 已经加载了仿论坛版本
		return;
	}
	switch ( 'scroll' ) {
		case getComputedStyle( body ).overflowY:
			scrollbarWidth = innerWidth - body.clientWidth;
			break;
		case getComputedStyle( html ).overflowY:
			scrollbarWidth = innerWidth - html.clientWidth;
			break;
		default:
			const backup = body.style.overflowY;
			body.style.overflowY = 'scroll';
			scrollbarWidth = innerWidth - body.clientWidth;
			body.style.overflowY = backup;
	}
	const btnObj = new OO.ui.ButtonWidget( {
		icon: 'collapse',
		label: '返回顶部',
		title: '返回顶部',
		invisibleLabel: true,
		classes: [ 'backToTop' ]
	} );
	btnObj.on( 'click', function () {
		$( 'html, body' ).animate( {
			scrollTop: 0
		}, 120 );
	}
	);
	const $btn = btnObj.$element;
	$btn.appendTo( 'body' );
	if ( scrollbarWidth === 0 ) {
		$btn.css( 'right', '20px' );
	}
	window.onscroll = function () {
		if ( document.scrollingElement.scrollTop > 0 ) {
			$btn.fadeIn();
		} else {
			$btn.fadeOut();
		}
	};
	window.onscroll();
} );