MediaWiki:Gadget-Backtotop.js
跳到导航
跳到搜索
注意:这类代码页面在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- 按住
CTRL+SHIFT+DEL 或 ⌘-Shift-R
来清除缓存! - 或尝试在地址栏的地址最后添加代码
?_=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>