Gadget:backToTop.js：修订间差异

Gadget:backToTop.js (查看源代码)

2023年7月18日 (二) 12:52的版本

添加869字节、 2023年7月18日 (星期二)

// Edit via Wikiplus

坑触可

巡查员

1,548

个编辑

@@ 第1行： / 第1行： @@
-// From 萌娘百科
+/* 引自萌百，有修改。*/
+// <pre>
-"use strict";
+/* 回到顶部 */
-$(function () {
+$(function() {
-     var btn = insertToBottomRightCorner("返回顶部").attr({
+     var body = document.body,
-         title: "返回顶部",
+        html = document.documentElement;
-        id: "backToTop"
+    var innerWidth = window.innerWidth;
-    }).css({
+    var scrollbarWidth;
-        "user-select": "none",
+    switch ("scroll") {
-         transition: "opacity .13s ease-in-out",
+        case getComputedStyle(body).overflowY:
-         order: "998"
+            scrollbarWidth = innerWidth - body.clientWidth;
-    }).on("click", function () {
+            break;
-        $("html, body").animate({
+        case getComputedStyle(html).overflowY:
-            scrollTop: 0
+            scrollbarWidth = innerWidth - html.clientWidth;
-        }, 130);
+            break;
-     });
+        default:
-     var $document = $(document);
+            var backup = body.style.overflowY;
-     $(window).on("scroll", function () {
+            body.style.overflowY = "scroll";
-         btn.css("opacity", $document.scrollTop() > 0 ? ".6" : "0");
+            scrollbarWidth = innerWidth - body.clientWidth;
-     }).trigger("scroll");
+            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>