“MediaWiki:Gadget-Backtotop.css”与“MediaWiki:Gadget-Backtotop.js”:页面之间的差异

H萌娘,万物皆可H的百科全书!
(页面间差异)
跳到导航 跳到搜索
imported>=海豚=
([InPageEdit] 没有编辑摘要)
 
imported>=海豚=
无编辑摘要
 
第1行: 第1行:
/*
// <pre>
回顶部
/* 回 顶部 */
*/
$(function() {
.backToTop {
   var body = document.body,
  background: rgba(0, 0, 0, 0.3)!important;
     html = document.documentElement;
  opacity: 1!important;
   var innerWidth = window.innerWidth;
  font-size: 16px!important;
   var scrollbarWidth;
  width: fit-content!important;
   switch ("scroll") {
  border-radius: 5px 5px 0px 0px!important;
     case getComputedStyle(body).overflowY:
  margin: auto!important;
       scrollbarWidth = innerWidth - body.clientWidth;
  padding: 5px 20px!important;
       break;
  bottom: 0%!important;
     case getComputedStyle(html).overflowY:
  left: 0;
       scrollbarWidth = innerWidth - html.clientWidth;
  right: 0;
       break;
  backdrop-filter: blur(20px);
     default:
  z-index: 1000;
       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>