MediaWiki:Gadget-Backtotop.js

H萌娘,万物皆可H的百科全书!
跳到导航 跳到搜索

注意:这类代码页面在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。

// <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>