☰

Go to Top

Scroll Back To Top Button

当前为 2018-03-16 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/39499/259012/Go%20to%20Top.js 

  1. // ==UserScript==
  2. // @name         Go to Top
  3. // @namespace    https://github.com/maijz128
  4. // @version      0.2
  5. // @description  Scroll Back To Top Button
  6. // @author       MaiJZ
  7. // @grant        none
  8. // ==/UserScript==
  9.  
  10.  
  11. (function () {
  12.     'use strict';
  13.  
  14.     const BUTTON_ID = "btnScrollToTop";
  15.     const TOP_FUNCTION_NAME = "btnScrollToTop_TopFunction";
  16.  
  17.     addButtonStyle();
  18.     addFunction();
  19.     addButton();
  20.  
  21.     function addButtonStyle() {
  22.         var style = '#' + BUTTON_ID + '{';
  23.         style += 'display:none; position:fixed; bottom:20px; right:30px; z-index:99; ';
  24.         style += 'font-size:15px; border:0; outline:0; background-color:#fff; color:#8590a6; ';
  25.         style += 'cursor:pointer; text-align: center; width: 40px; height: 40px; ';
  26.         style += 'border-radius:4px; box-shadow:0 1px 3px rgba(26,26,26,.1); ';
  27.         style += '}';
  28.  
  29.         style += '#' + BUTTON_ID + ':hover { background-color: #d3d3d3;  }';
  30.  
  31.         addStyle(style);
  32.     }
  33.  
  34.     function addFunction() {
  35.         window.addEventListener("scroll", function () {
  36.             var minScrollTop = 50;
  37.             if (document.body.scrollTop > minScrollTop || document.documentElement.scrollTop > minScrollTop) {
  38.                 document.getElementById(BUTTON_ID).style.display = "block";
  39.             } else {
  40.                 document.getElementById(BUTTON_ID).style.display = "none";
  41.             }
  42.         });
  43.  
  44.         var strFun = 'function ' + TOP_FUNCTION_NAME + '()';
  45.         // strFun += '{ document.body.scrollTop = 0; document.documentElement.scrollTop = 0;}';
  46.         strFun += '{ var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;';
  47.         strFun += 'var increment = scrollHeight / 100;';
  48.         strFun += 'var gotoTop= function(){ var currentPosition = document.documentElement.scrollTop || document.body.scrollTop;';
  49.         strFun += 'currentPosition -= increment; if(currentPosition>0){window.scrollTo(0,currentPosition)}else{window.scrollTo(0,0);clearInterval(timer);timer = null}}; ';
  50.         strFun += 'var timer=setInterval(gotoTop,1); }';
  51.  
  52.         var elScript = document.createElement("script");
  53.         elScript.innerHTML = strFun;
  54.         document.head.appendChild(elScript);
  55.     }
  56.  
  57.     function addButton() {
  58.         var strSVG = '<svg class="" title="Back to Top" fill="#8590a6" viewBox="0 0 24 24" width="24" height="24">';
  59.         strSVG += '<path d="M16.036 19.59a1 1 0 0 1-.997.995H9.032a.996.996 0 0 1-.997-.996v-7.005H5.03c-1.1 0-1.36-.633-.578-1.416L11.33 4.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.005z"></path></svg>';
  60.  
  61.  
  62.         var elButton = document.createElement("button");
  63.         elButton.setAttribute('id', BUTTON_ID);
  64.         elButton.setAttribute("onclick", TOP_FUNCTION_NAME + '()');
  65.         elButton.setAttribute('title', "Back to Top");
  66.         elButton.innerHTML = strSVG;
  67.  
  68.         document.body.appendChild(elButton);
  69.     }
  70.  
  71.  
  72.     function addStyle(styleContent) {
  73.         var elStyle = document.createElement("style");
  74.         elStyle.innerHTML = styleContent;
  75.         document.head.appendChild(elStyle);
  76.     }
  77. })();