“MediaWiki:Gadget-Backtotop.css”与“MediaWiki:Gadget-Backtotop.js”:页面之间的差异
(页面间差异)
跳到导航
跳到搜索
imported>=海豚= ([InPageEdit] 没有编辑摘要) |
imported>=海豚= 无编辑摘要 |
||
第1行: | 第1行: | ||
/ | // <pre> | ||
/* 回 到 顶部 */ | |||
$(function() { | |||
. | var body = document.body, | ||
html = document.documentElement; | |||
var innerWidth = window.innerWidth; | |||
var scrollbarWidth; | |||
switch ("scroll") { | |||
case getComputedStyle(body).overflowY: | |||
scrollbarWidth = innerWidth - body.clientWidth; | |||
break; | |||
case getComputedStyle(html).overflowY: | |||
scrollbarWidth = innerWidth - html.clientWidth; | |||
break; | |||
default: | |||
var backup = body.style.overflowY; | |||
body.style.overflowY = "scroll"; | |||
scrollbarWidth = innerWidth - body.clientWidth; | |||
body.style.overflowY = backup; | |||
} | |||
var btn = $("<div/>", { | |||
"text": "返回顶部", | |||
"attr": { | |||
"title": "返回顶部", | |||
"class": "backToTop" | |||
}, | |||
"css": { | |||
"user-select": "none" | |||
}, | |||
"on": { | |||
"click": function() { | |||
$("html, body").animate({ | |||
scrollTop: 0 | |||
}, 120); | |||
} | |||
} | |||
}).appendTo(document.body); | |||
if (scrollbarWidth === 0) { | |||
btn.css("right", "20px"); // 修复新版 Chrome 的自动隐藏式滚动条导致的按钮被覆盖 chrome://flags/#overlay-scrollbars | |||
} | |||
$(window).on("scroll", function() { | |||
$(document).scrollTop() > 0 ? btn.fadeIn() : btn.fadeOut(); | |||
}).scroll(); | |||
}); | |||
// </pre> |
2020年6月21日 (日) 11:45的最新版本
// <pre>
/* 回到顶部 */
$(function() {
var body = document.body,
html = document.documentElement;
var innerWidth = window.innerWidth;
var scrollbarWidth;
switch ("scroll") {
case getComputedStyle(body).overflowY:
scrollbarWidth = innerWidth - body.clientWidth;
break;
case getComputedStyle(html).overflowY:
scrollbarWidth = innerWidth - html.clientWidth;
break;
default:
var backup = body.style.overflowY;
body.style.overflowY = "scroll";
scrollbarWidth = innerWidth - body.clientWidth;
body.style.overflowY = backup;
}
var btn = $("<div/>", {
"text": "返回顶部",
"attr": {
"title": "返回顶部",
"class": "backToTop"
},
"css": {
"user-select": "none"
},
"on": {
"click": function() {
$("html, body").animate({
scrollTop: 0
}, 120);
}
}
}).appendTo(document.body);
if (scrollbarWidth === 0) {
btn.css("right", "20px"); // 修复新版 Chrome 的自动隐藏式滚动条导致的按钮被覆盖 chrome://flags/#overlay-scrollbars
}
$(window).on("scroll", function() {
$(document).scrollTop() > 0 ? btn.fadeIn() : btn.fadeOut();
}).scroll();
});
// </pre>